input 標簽實現(xiàn)輸入框帶提示文字效果(兩種方法)
方法一：html5配合css3實現(xiàn)帶提示文字的輸入框(擺脫js)；
webkit特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統(tǒng)登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你，Webkit作為載體開發(fā)系統(tǒng)，當然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。
當選中對話框后，提示文字變淺色,輸入后消失.這個現(xiàn)在通行的做法是在Input標簽后面增加一個Label。使用JS控制。
HTML5出現(xiàn)后，我們有一個更好的方法。
<input type="text" placeholder="用戶名或郵件地址" name="username"/>
看到有placeholder標簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們該怎么辦？
input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}
-webkit-input-placeholder，webkit特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統(tǒng)登錄、搜索等位置很適合。當然你要為了兼容IE6，這個方法是行不通。不過Ie9也支持placeholder標簽，就是無法修改它的顏色而已。
那么，如果不支持該怎么辦？可以簡單直接使用Jquery幫忙，那么在就不在本文討論范圍了。
給一個Demo，Demo地址 必須在Webkit瀏覽器下才看到完整效果。是不是很方便？
方法二：就是 js 控制；
代碼如下：
<script type="text/javascript">
$(document).ready(function(){
$("#focus .input_txt").each(function(){
var thisVal=$(this).val();
//判斷文本框的值是否為空，有值的情況就隱藏提示語，沒有值就顯示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型輸入框驗證
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val();
//判斷文本框的值是否為空，有值的情況就隱藏提示語，沒有值就顯示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})
</script>
效果如圖；
點擊的時候，提示文字消失；失去焦點的時候提示文字出現(xiàn)，但是有內(nèi)容輸入后失去焦點也不顯示提示文字；還有，密碼框和文本框不一樣啊，密碼框的值不顯現(xiàn)的。
方法三：直接寫標簽上；（這個比較實用）
代碼如下：
<input type="text" value="提示內(nèi)容。。。" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="#999;"/>
</div>
總結(jié)
以上所述是小編給大家介紹的input 標簽實現(xiàn)輸入框帶提示文字效果(兩種方法)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
懸浮窗就是圖中微信圖標的按鈕，采用fixed定位，可拖動和點擊。本文給大家分享一個比較常見的常見，通過實例代碼給大家介紹微信小程序中懸浮窗功能的實現(xiàn)，一起看看吧2019-08-08
這篇文章主要為大家詳細介紹了原生js實現(xiàn)碰撞檢測，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript實現(xiàn)的Tween算法及緩沖特效實例代碼
這篇文章主要介紹了JavaScript實現(xiàn)的Tween算法及緩沖特效,涉及JavaScript通過數(shù)學(xué)運算及樣式屬性操作實現(xiàn)緩動、彈性運動等效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化實例詳解
這篇文章主要介紹了js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化方法,以實例形式較為詳細的分析并總結(jié)了JavaScript數(shù)組的常見使用技巧與轉(zhuǎn)化方法,需要的朋友可以參考下2015-11-11
JavaScript獲取GridView中用戶點擊控件的行號，列號
GridView中的某幾列有按鈕，需要獲取用戶當前點的按鈕的行號（捎帶的得到列號）2009-04-04
這篇文章主要為大家介紹了Javascript觀察者模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12![用js模仿word格式刷功能實現(xiàn)代碼 [推薦]](http://img.jbzj.com/images/xgimg/bcimg6.png)
非常不錯的模仿word格式刷實現(xiàn)代碼。推薦大家參考下思路。2009-07-07
JavaScript實現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實例
JavaScript中通過提示框跳轉(zhuǎn)頁面的方法