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:;  //去掉圆角
}

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="点我啊"/>