zoukankan      html  css  js  c++  java
  • 兼容ie的placeholder设置

    html5的placeholder在ie上不被支持,解决的方法

    直接在网页里添加

    <!--兼容ie的placeholder-->
    <script src="static/js/placeholder.js"></script>

    就可以了

     1 function isPlaceholder(){
     2  var input = document.createElement('input');
     3  return 'placeholder' in input;
     4 }
     5 
     6 if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
     7  $(document).ready(function() {
     8      if(!isPlaceholder()){
     9          $("input").not("input[type='password']").each(//把input绑定事件 排除password框
    10              function(){
    11                  if($(this).val()=="" && $(this).attr("placeholder")!=""){
    12                      $(this).val($(this).attr("placeholder"));
    13                      $(this).focus(function(){
    14                          if($(this).val()==$(this).attr("placeholder")) $(this).val("");
    15                      });
    16                      $(this).blur(function(){
    17                          if($(this).val()=="") $(this).val($(this).attr("placeholder"));
    18                      });
    19                  }
    20          });
    21          //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
    22          var pwdField = $("input[type=password]");
    23          var pwdVal  = pwdField.attr('placeholder');
    24          pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" class="form-control" />');
    25          var pwdPlaceholder = $('#pwdPlaceholder');
    26          pwdPlaceholder.show();
    27          pwdField.hide();
    28          
    29          pwdPlaceholder.focus(function(){
    30           pwdPlaceholder.hide();
    31           pwdField.show();
    32           pwdField.focus();
    33          });
    34          
    35          pwdField.blur(function(){
    36           if(pwdField.val() == '') {
    37            pwdPlaceholder.show();
    38            pwdField.hide();
    39           }
    40          });
    41          
    42      }
    43  });
    44  
    45 }
    View Code
  • 相关阅读:
    vant框架的select下拉框
    监听滚轴高度
    关于使用iframe的父子页面进行简单的相互传值
    vue监听移动端物理返回
    vue+ElementUI项目中,input只能输入正整数的验证
    移动端公共样式
    协程嵌套协程
    基础知识
    汉化包
    .ui转.py文件命令
  • 原文地址:https://www.cnblogs.com/zhangruiyun/p/3885868.html
Copyright © 2011-2022 走看看