找回密码
 注册

[JS] placeholder 兼容 required 兼容 Chrome, Firefox, Opera, Safari, IE 6 7 8 9+

php 发表于 2014/7/15 22:31 | 显示全部楼层 |阅读模式
原生JS代码实现Google Chrome, Firefox, Opera, Safari, IE 6 7 8 9 10 11+兼容 html5 的 placeholder 属性和 required 属性。
另请参见JS代码检测浏览器是否支持placeholder属性、JS代码检测浏览器是否支持required属性
以下javascript代码实现为 html5 placeholder 属性和 required 属性的浏览器兼容。
为了避免代码被编辑破坏,我们同时提供了文本代码供下载。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta http-equiv="UA-X-Compatible" content="IE=Edge,Chrome=1" />
  5.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  6.         <title>placeholder required 兼容Chrome, Firefox, Safari, Opera, IE 6 7 8 9 10 11+</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <meta name="robots" content="none" />
  9.         <style>
  10.                 *{margin:0;padding:0;outline:none;}
  11.                 body{font:14px/1.5 SimSun,Arial;width:100%;margin:0;}
  12.                 h1{font-style:normal;font-weight:normal;}
  13.                 div#container{margin:10px;}
  14.                 p{margin:10px 0;}
  15.                 input{display:block;margin:15px 0;vertical-align:middle;width:20%;_height:2em;_line-height:2em;}
  16.                 input:focus{text-shadow:0 0 2px #000000;}
  17.                 input[type="text"]{height:2em;line-height:2em;padding:5px;}
  18.                 input[type="submit"]{height:3em;width:6em;text-align:center;cursor:pointer;}
  19.         </style>
  20. </head>
  21. <body>
  22.         <div id="container">
  23.                 <p>请填写以下表单</p>
  24.                 <form method="POST" autocomplete="off">
  25.                         <input type="text" name="name" placeholder="你的姓名" required />
  26.                         <input type="text" name="phone" placeholder="联系方式" required />
  27.                         <input type="text" name="cp" placeholder="工作单位" required />
  28.                         <input type="submit" name="submit" value=" 提 交 " />
  29.                 </form>
  30.         </div>
  31.         <script>
  32.                 /* www.51-n.com 原创代码 qQ:229256237
  33.                  * 检测浏览器是否支持 placeholder 属性
  34.                  * 为不支持 placeholder 属性的浏览器写兼容代码
  35.                  * 注意,需要 placeholder 的表单控件不要写value属性。
  36.                  * 本代码只操作 input 控件,如果需要支持其他控件请自己修改代码
  37.                  * 下面对 required 属性的操作同理。
  38.                 */       
  39.                 var testElement=document.createElement('input');
  40.                 var placeholderSupported='placeholder' in testElement;
  41.                 if(!placeholderSupported){
  42.                         var inputs=document.getElementsByTagName('input');
  43.                         for(var n=0;n<inputs.length;n++){
  44.                                 var input=inputs[n];
  45.                                 var placeholder=input.placeholder?input.placeholder:input.getAttribute('placeholder');
  46.                                 //部分浏览器不支持直接操作自定义属性,用 getAttribute() 来获取自定义属性。
  47.                                 if(!placeholder) continue;
  48.                                 input.value=placeholder;
  49.                                 input.onfocus=function(){
  50.                                         if(this.value==this.getAttribute('placeholder')){
  51.                                                 this.value='';
  52.                                         }
  53.                                 };
  54.                                 input.onmouseover=function(){
  55.                                         this.focus();
  56.                                 }
  57.                                 input.onblur=function(){
  58.                                         if(this.value==''){
  59.                                                 this.value=this.getAttribute('placeholder');
  60.                                         }
  61.                                 }
  62.                         }
  63.                 }else{
  64.                         var inputs=document.getElementsByTagName('input');               
  65.                         for(var n=0;n<inputs.length;n++){
  66.                                 inputs[n].onmouseover=function(){
  67.                                         this.focus();
  68.                                 }
  69.                         }
  70.                 }
  71.                 /* 检测浏览器是否支持 required 属性
  72.                  * 为不支持 required 属性的浏览器写兼容代码
  73.                 */               
  74.                 var requiredSupported='required' in testElement&&!/Version\/[\d\.]+\s*Safari/i.test(navigator.userAgent);
  75.                 if(!requiredSupported){
  76.                         document.getElementsByTagName('form')[0].onsubmit=function(e){
  77.                                 var inputs=document.getElementsByTagName('input');
  78.                                 for(var n=0;n<inputs.length;n++){
  79.                                         var input=inputs[n];
  80.                                         var placeholder=input.placeholder?input.placeholder:input.getAttribute('placeholder');                                       
  81.                                         if(!placeholder) continue;
  82.                                         if(!input.value||(input.value==placeholder)){
  83.                                                 alert('请填写'+placeholder);
  84.                                                 e=e||window.event;
  85.                                                 e.preventDefault&&e.preventDefault();
  86.                                                 e.returnValue=false;
  87.                                                 break;
  88.                                         }
  89.                                 }
  90.                         };
  91.                 }
  92.         </script>
  93. </body>
  94. </html>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表