首頁 > 文章 > web前端 > input標籤輸入框帶提示文字方法

input標籤輸入框帶提示文字方法

小云云原創: 2018-01-26 13:18:328563瀏覽

本文主要介紹了input 標籤實現輸入框帶提示文字效果(兩種方法),需要的朋友可以參考下，希望能幫助到大家。

方法一：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=&#39;&#39;;this.style.color=&#39;#000&#39;}" onBlur="if(!value){value=defaultValue;this.style.color=&#39;#999&#39;}" style ="#999;"/>
    </p>

input標籤輸入框帶提示文字方法

相關文章