input 標簽實現輸入框帶提示文字效果(兩種方法)

來源：懂視網責編：小采時間：2020-11-27 22:28:09

input 標簽實現輸入框帶提示文字效果(兩種方法)

input 標簽實現輸入框帶提示文字效果(兩種方法):方法一：html5配合css3實現帶提示文字的輸入框(擺脫js)； webkit特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你，W

推薦度：

點擊下載本文 文檔為doc格式

導讀input 標簽實現輸入框帶提示文字效果(兩種方法):方法一：html5配合css3實現帶提示文字的輸入框(擺脫js)； webkit特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你，W

方法一：html5配合css3實現帶提示文字的輸入框(擺脫js)；

webkit特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你，Webkit作為載體開發系統，當然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。

當選中對話框后，提示文字變淺色,輸入后消失.這個現在通行的做法是在Input標簽后面增加一個Label。使用JS控制。

HTML5出現后，我們有一個更好的方法。

<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的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統登錄、搜索等位置很適合。當然你要為了兼容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>

效果如圖；

點擊的時候，提示文字消失；失去焦點的時候提示文字出現，但是有內容輸入后失去焦點也不顯示提示文字；還有，密碼框和文本框不一樣啊，密碼框的值不顯現的。

方法三：直接寫標簽上；（這個比較實用）

代碼如下：

<input type="text" value="提示內容。。" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="#999;"/>
 </div>

總結

以上所述是小編給大家介紹的input 標簽實現輸入框帶提示文字效果(兩種方法)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com