input输入框预留文字,且实现星号密码输入方法placeholder= - 贝壳iT,beikeit.com
input输入框预留文字,且实现星号密码输入方法placeholder=
 

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>