input输入框预留文字,且实现星号密码输入方法placeholder=

2014年09月05日 技术资料 1.95 W views 0

input输入框预留文字,且实现星号密码输入方法placeholder=
input输入框预留文字,且实现星号密码输入方法placeholder= 第1张 

html5为元素添加了新属性placeholder。
这是一个很常用的功能:把提示放在输入框里;onfocus时提示消息;onblur时如果已有值,则不再提示,如果没值,保留提示。QWrap的Valid组件里,提供了这个功能。不过Valid的功能太多,有使用成本。这里,把跟placeholder的功能独立出来,可以无依赖的使用。


其实很简单。贴上代码吧!


  1. <input type="text" name="user" id="username" placeholder="请输入用户"  />

  2. <input type="password" name="pw" id="password" value="" placeholder="请输入密码"/>

  3. <?php echo $ckcode; ?>

  4. <input type="submit" name="submit" id="submit" value="登 录" data-theme="b" />

  5. </form>




其他举列
  1. View Code 

  2. <html>

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=GB2312">

  5. <title>验证Valid ----placeholder</title>

  6.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  7.     <style>

  8.     span.emptyhint {color:#999;position:absolute;padding:3px;}

  9.     </style>

  10. </head>

  11. <body>

  12. <div id=doc3>

  13.     <div id="bd" >

  14.         <div class="section-ctn">

  15.             <ul>

  16.                 <li>

  17.                     <label class="k">订单主人:</label>

  18.                     <input type="text" placeholder="请填写订单主人" value="613sky.com">

  19.                 </li>

  20.                 <li>

  21.                     <label class="k">订单号:</label>

  22.                     <input type="text" placeholder="请填写订单号">

  23.                 </li>

  24.                 <li>

  25.                     <label class="k">备注:</label>

  26.                     <textarea type="text" placeholder="请填写备注"></textarea>

  27.                 </li>

  28.             </ul>

  29.         </div>

  30.     </div>

  31.   

  32. </div>

  33. </body>


  34. <script>


  35. function initPlaceHolders(){

  36.     if('placeholder' in document.createElement('input')){ //如果浏览器原生支持placeholder

  37.         return ;

  38.     }

  39.     function target (e){

  40.         var e=e||window.event;

  41.         return e.target||e.srcElement;

  42.     };

  43.     function _getEmptyHintEl(el){

  44.         var hintEl=el.hintEl;

  45.         return hintEl && g(hintEl);

  46.     };

  47.     function blurFn(e){

  48.         var el=target(e);

  49.         if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下,onfocusin会在div等元素触发 

  50.         var    emptyHintEl=el.__emptyHintEl;

  51.         if(emptyHintEl){

  52.             //clearTimeout(el.__placeholderTimer||0);

  53.             //el.__placeholderTimer=setTimeout(function(){//在360浏览器下,autocomplete会先blur再change

  54.                 if(el.value) emptyHintEl.style.display='none';

  55.                 else emptyHintEl.style.display='';

  56.             //},600);

  57.         }

  58.     };

  59.     function focusFn(e){

  60.         var el=target(e);

  61.         if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下,onfocusin会在div等元素触发 

  62.         var emptyHintEl=el.__emptyHintEl;

  63.         if(emptyHintEl){

  64.             //clearTimeout(el.__placeholderTimer||0);

  65.             emptyHintEl.style.display='none';

  66.         }

  67.     };

  68.     if(document.addEventListener){//ie

  69.         document.addEventListener('focus',focusFn, true);

  70.         document.addEventListener('blur', blurFn, true);

  71.     }

  72.     else{

  73.         document.attachEvent('onfocusin',focusFn);

  74.         document.attachEvent('onfocusout',blurFn);

  75.     }


  76.     var elss=[document.getElementsByTagName('input'),document.getElementsByTagName('textarea')];

  77.     for(var n=0;n<2;n++){

  78.         var els=elss[n];

  79.         for(var i =0;i<els.length;i++){

  80.             var el=els[i];

  81.             var placeholder=el.getAttribute('placeholder'),

  82.                 emptyHintEl=el.__emptyHintEl;

  83.             if(placeholder && !emptyHintEl){

  84.                 emptyHintEl=document.createElement('span');

  85.                 emptyHintEl.innerHTML=placeholder;

  86.                 emptyHintEl.className='emptyhint';

  87.                 emptyHintEl.onclick=function (el){return function(){try{el.focus();}catch(ex){}}}(el);

  88.                 if(el.value) emptyHintEl.style.display='none';

  89.                 el.parentNode.insertBefore(emptyHintEl,el);

  90.                 el.__emptyHintEl=emptyHintEl;

  91.             }

  92.         }

  93.     }

  94. }


  95. initPlaceHolders();


  96. </script>

  97. </html>

分享到:
赞🧧赏

发表评论

欢迎交流:

欢迎您朋友:

1、本站无广告推广,免费分享

2、内容错误纠错欢迎反馈站长

3、新版解压密码看我QQ空间,或留言

     纯净共享奉献,站长非24小时在线



By iT猫itcat.cn 宣