快捷導(dǎo)航

input 標(biāo)簽實(shí)現(xiàn)輸入框帶提示文字效果(兩種方法)

更新時(shí)間：2017年10月09日 15:23:03 作者：HD243608836

這篇文章主要介紹了input 標(biāo)簽實(shí)現(xiàn)輸入框帶提示文字效果(兩種方法),需要的朋友可以參考下

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

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

當(dāng)選中對(duì)話框后，提示文字變淺色,輸入后消失.這個(gè)現(xiàn)在通行的做法是在Input標(biāo)簽后面增加一個(gè)Label。使用JS控制。

HTML5出現(xiàn)后，我們有一個(gè)更好的方法。

<input type="text" placeholder="用戶名或郵件地址" name="username"/>

看到有placeholder標(biāo)簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們?cè)撛趺崔k？

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特有的一個(gè)css，可以控制里面的文字樣式，配合css3的動(dòng)畫(huà)效果和偽類(lèi)，我們就可以很容易做出一個(gè)帶動(dòng)畫(huà)的輸入框，在系統(tǒng)登錄、搜索等位置很適合。當(dāng)然你要為了兼容IE6，這個(gè)方法是行不通。不過(guò)Ie9也支持placeholder標(biāo)簽，就是無(wú)法修改它的顏色而已。
那么，如果不支持該怎么辦？可以簡(jiǎn)單直接使用Jquery幫忙，那么在就不在本文討論范圍了。

給一個(gè)Demo，Demo地址必須在Webkit瀏覽器下才看到完整效果。是不是很方便？

方法二：就是 js 控制；

代碼如下：

<script type="text/javascript">
 $(document).ready(function(){
 $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判斷文本框的值是否為空，有值的情況就隱藏提示語(yǔ)，沒(méi)有值就顯示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型輸入框驗(yàn)證 
  $(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();
  //判斷文本框的值是否為空，有值的情況就隱藏提示語(yǔ)，沒(méi)有值就顯示
  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>

效果如圖；

點(diǎn)擊的時(shí)候，提示文字消失；失去焦點(diǎn)的時(shí)候提示文字出現(xiàn)，但是有內(nèi)容輸入后失去焦點(diǎn)也不顯示提示文字；還有，密碼框和文本框不一樣啊，密碼框的值不顯現(xiàn)的。

方法三：直接寫(xiě)標(biāo)簽上；（這個(gè)比較實(shí)用）

代碼如下：

<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 標(biāo)簽實(shí)現(xiàn)輸入框帶提示文字效果(兩種方法)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: