首页>>表单>>最常见占位符演示(2021-10-12)

最常见占位符演示

最常见的占位符，触发后隐藏

最常见占位符演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form><link href="css/style.min.css" rel="stylesheet" />  
  2.   
  3.         <label class="fade">  
  4.             <input name="field1" placeholder="触发/模糊焦点" />  
  5.             <div class="arrow"></div>  
  6.         </label>  
  7.         <label class="fade">  
  8.             <textarea name="field2" placeholder="输入或textareas"></textarea>  
  9.             <div class="arrow"></div>  
  10.         </label>  
  11.     </form>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3. <!--占位符演示代码-->  
  4. Placeholdem(document.querySelectorAll('[placeholder]'));  
  5.   
  6.   
  7. <!--页面打开淡出淡进/可无视-->  
  8. var fadeElems = document.body.querySelectorAll('.fade'),  
  9. fadeElemsLength = fadeElems.length,  
  10. i = 0,  
  11. interval = 50;  
  12. function incFade(){  
  13.     if(i < fadeElemsLength){  
  14.         fadeElems[ i ].className += ' fade-load';  
  15.         i++;  
  16.         setTimeout(incFade, interval);  
  17.     }  
  18. }  
  19. setTimeout( incFade, interval );  
  20. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_919.html