我們在編寫網(wǎng)頁的時(shí)候不可避免的會(huì)遇到輸入框毡代，那么怎么設(shè)計(jì)輸入框才能更加優(yōu)雅呢？不同的人會(huì)有不同的答案，下面分享一個(gè)比較不錯(cuò)的設(shè)計(jì)苗沧。
效果圖
-
初始化效果
初始化效果 -
輸入框獲取鼠標(biāo)焦點(diǎn)
輸入框獲取鼠標(biāo)焦點(diǎn) -
密碼框?qū)傩詣?dòng)態(tài)變化刊棕，實(shí)現(xiàn)密碼特效
密碼框?qū)傩詣?dòng)態(tài)變化，實(shí)現(xiàn)密碼特效
細(xì)節(jié)
這個(gè)效果主要是通過JQuery來實(shí)現(xiàn)待逞，我的思路如下：
輸入框獲取鼠標(biāo)焦點(diǎn)之前甥角，顯示原標(biāo)簽的
value屬性值；獲取了鼠標(biāo)焦點(diǎn)之后识樱，如果當(dāng)前value有值嗤无，那就清空，否則恢復(fù)怜庸；密碼框特殊照顧当犯，待會(huì)講。
實(shí)現(xiàn)的代碼如下：
$("#address").focus(function(){
var address_text = $(this).val();
if(address_text=="請輸入郵箱地址"){
$(this).val("");
}
});
$("#address").blur(function(){
var address_value = $(this).val();
if(address_value==""){
$(this).val("請輸入郵箱地址")
}
});
完整的小例子
完整的代碼如下割疾，尤其注意<input type="text" id="password">的實(shí)現(xiàn)嚎卫！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本輸入框中內(nèi)容的提示效果</title>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$(function(){
$("#address").focus(function(){
var address_text = $(this).val();
if(address_text=="請輸入郵箱地址"){
$(this).val("");
}
});
$("#password").focus(function(){
var password_text = $(this).val();
if(password_text=="請輸入密碼"){
$(this).attr("type","password");
$(this).val("");
}
});
$("#address").blur(function(){
var address_value = $(this).val();
if(address_value==""){
$(this).val("請輸入郵箱地址")
}
});
$("#password").blur(function(){
var password_value = $(this).val();
if(password_value==""){
$(this).attr("type","text");
$(this).val("請輸入密碼")
}
});
});
</script>
<div align="center">
<input type="text" id ="address" value="請輸入郵箱地址"><br><br>
<input type="text" id ="password" value="請輸入密碼"><br><br>
<input type="button" name="登錄" value="登陸">
</div>
</body>
</html>
$(function(){});其就是$(document).ready(function(){});的縮寫。這個(gè)倒不是什么重點(diǎn)杈曲。
$(this).attr("type","password");將當(dāng)前對象（也就是獲取鼠標(biāo)焦點(diǎn)的輸入框）的屬性值進(jìn)行動(dòng)態(tài)的改變驰凛。達(dá)到輸入數(shù)據(jù)的時(shí)候以密碼框的形式出現(xiàn)。
