input框处理大全

1、去掉谷歌input记住账号或密码时默认出现的黄色背景：

直接用css的内阴影来覆盖黄色（代码中 white可换成其他颜色）

 

input:-webkit-autofill { 
-webkit-box-shadow: 0 0 0px 1000px white inset; 
} 

 

2、去掉Input框的默认样式：

input, button, select, textarea {
outline: none;    //去掉chrome浏览器自带的点击input框出现边框情况
-webkit-appearance: none;   //去掉按钮样式
border-radius: 0;  //去掉圆角
}

 

3、控制input标签聚焦时不出现默认边框：

input:focus{ outline:none; }

 

4、input消除自动记忆功能：

<input type="text" autocomplete="off">
// input 的autocomplete属性默认是on：其含义代表是否让浏览器自动记录之前输入的值
off：则关闭记录

 

5、解决input pleaceholder属性在ie8,ie9上不支持：

$(function() {
  // 如果不支持placeholder，用jQuery来完成
  if(!isSupportPlaceholder()) {
    // 遍历所有input对象, 除了密码框
    $('input').not("input[type='password']").each(
      function() {
        var self = $(this);
        var val = self.attr("placeholder");
        input(self, val);
      }
    );
    
    /* 对password框的特殊处理
     * 1.创建一个text框 
     * 2.获取焦点和失去焦点的时候切换
     */
    $('input[type="password"]').each(
      function() {
        var pwdField    = $(this);  
        var pwdVal      = pwdField.attr('placeholder');  
        var pwdId       = pwdField.attr('id');  
        // 重命名该input的id为原id后跟1
        pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');  
        var pwdPlaceholder = $('#' + pwdId + '1');  
        pwdPlaceholder.show();  
        pwdField.hide();  
          
        pwdPlaceholder.focus(function(){  
          pwdPlaceholder.hide();  
          pwdField.show();  
          pwdField.focus();  
        });  
          
        pwdField.blur(function(){  
          if(pwdField.val() == '') {  
            pwdPlaceholder.show();  
            pwdField.hide();  
          }  
        });  
      }
    );
  }
});

// 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
  var input = document.createElement('input');
  return 'placeholder' in input;
}

// jQuery替换placeholder的处理
function input(obj, val) {
  var $input = obj;
  var val = val;
  $input.attr({value:val});
  $input.focus(function() {
    if ($input.val() == val) {
      $(this).attr({value:""});
    }
  }).blur(function() {
    if ($input.val() == "") {
            $(this).attr({value:val});
    }
  });
}

 

6、去掉IE10+浏览器下，input标签的‘×’号，密码框的小眼睛：

IE10+浏览器下，input标签会有一个默认的样式，比如文本框的‘×’号，密码框的小眼睛。初衷是好的，有时候很方便，但有时候我们会自己设置样式和功能。可以用伪元素方法去除： 

::-ms-clear, ::-ms-reveal{display: none;}

 

7、去掉input框点击时 光标显示

<input type="text" readonly unselectable="on" onfocus="this.blur()" value="点我啊"/>