input输入框总结

发表于   |  

  • 常用的类型也就除了html4中的 还可以使用到 tel 、 number 、range（方便做demo)

  • 属性有 ： (autocomplate autofocus) (form类的) (min max step) (palceholder required pattern )
    size maxlength readonly disable hidden

  • ？placeholder问题

    颜色： ::-webkit-input-placeholder{} :-moz-placeholde

    js解决兼容 ：方法很多，这里提供一种基于jq的使用虚拟span的方案，测试可用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    var JPlaceHolder = {
        //检测
        _check : function(){
            return 'placeholder' in document.createElement('input');
        },
        //初始化
        init : function(){
            if(!this._check()){
                this.fix();
            }
        },
        //修复
        fix : function(){
            jQuery(':input[placeholder]').each(function(index, element) {
                var self = $(this), txt = self.attr('placeholder');
                self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
                var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
                self.focusin(function(e) {
                    holder.hide();
                }).focusout(function(e) {
                    if(!self.val()){
                        holder.show();
                    }
                });
                holder.click(function(e) {
                    holder.hide();
                    self.focus();
                });
            });
        }
    };
    //执行
    jQuery(function(){
        JPlaceHolder.init();
    });

  • 样式问题
    input 的字体值等不继承，所以要重新写

    去掉默认样式：-webkit-appearance:none;

    -moz-appearance: none;

    (不如直接用样式覆盖)

    去掉背景色： -webkit-box-shadow: 0 0 0px 1000px white inset;

    palcehoder:颜色值

  • 验证问题

    基于 html5属性的 required tel 等

    如何修改提示提示信息？ 可以修改字体信息，但是不常用，不如使用插件

  • 样式定制

    修改默认的 radio checkbox的显示 例如iphone的开关

    修改type=’range’的默认显示

    1
    2
    3
    4
    5
    6
    7
    8
    ::-webkit-slider-runnable-track {
                           -webkit-appearance: none;
                           height: 2px;
                           border: none;
                           margin: 1em 0;
                           background: #fff;
                           color: #fff
                       }

热评文章