无码精品宅男二区在线观看_无码香蕉久综合在线久草观看_久久亚洲三区亚洲热香蕉导航综合_亚洲伊人热一本香蕉天久麻豆熟女老司机乱伦

網絡建站知識

精準傳達 ? 價值共享

洞悉互聯網前沿資訊，探尋網站營銷規律

查看其它板塊

input 提示文字

作者：狐靈科技 | 2019-12-22 12:35 |點擊：

方法一：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 標簽實現輸入框帶提示文字效果(兩種方法)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如沒特殊注明，文章均為狐靈科技原創,轉載請注明?? "input 提示文字
相關推薦
多一份免費策劃方案，總有益處。

請直接添加技術總監微信聯系咨詢

網站設計 品牌營銷

多一份參考，總有益處

聯系狐靈科技，免費獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談，可以通過以下方式與我們聯系

業務熱線：15082661954 / 大客戶專線：15523356218

關于狐靈科技

+

狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括 網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！

我們的優勢

量身打造個性化網站制作

代碼深度符合SEO優化

一站式企業網站建設服務

前沿視覺設計、研發能力

重慶網站建設公司

多項網站設計傳播大獎

營銷型網站建設專家

自主研發網站管理系統

B2C電商網站建設供應商

完善的售后服務體系

我們的不同

+

在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！

公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權所有 | 渝ICP備19005721號-1

專業團隊為您提供 重慶網頁設計, 品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！ | TAG標簽 | 網站建設地圖 | 網站地圖