zoukankan      html  css  js  c++  java

  • PlaceHolder的两种实现方式

    placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。

    如

    1
    <input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">

    目前浏览器的支持情况

    浏览器 IE6/7/8/9 IE10+ Firefox Chrome Safari 
    是否支持 NO YES YES YES YES

    然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致

    • IE10+里鼠标点击时（获取焦点）placeholder文本消失
    • Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

    这相当恶心，如果使用了placeholder属性。产品经理还是不依不饶，会讲为什么IE里是点击的时候提示文本消失，Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此，以下两种实现方式均不采用原生的placeholder属性。

    两种方式的思路

    1. (方式一)使用input的value作为显示文本
    2. (方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面

    两种方式各有优缺点，方式一占用了input的value属性，表单提交时需要额外做一些判断工作，方式二则使用了额外的标签。

    方式一

    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    /**
     * PlaceHolder组件
     * $(input).placeholder({
     *   word:     // @string 提示文本
     *   color:    // @string 文本颜色
     *   evtType:  // @string focus|keydown 触发placeholder的事件类型
     * })
     *
     * NOTE：
     *   evtType默认是focus，即鼠标点击到输入域时默认文本消失，keydown则模拟HTML5 placeholder属性在Firefox/Chrome里的特征，光标定位到输入域后键盘输入时默认文本才消失。
     *   此外，对于HTML5 placeholder属性，IE10+和Firefox/Chrome/Safari的表现形式也不一致，因此内部实现不采用原生placeholder属性
     */
    $.fn.placeholder = function(option, callback) {
        var settings = $.extend({
            word: '',
            color: '#ccc',
            evtType: 'focus'
        }, option)
     
        function bootstrap($that) {
            // some alias
            var word    = settings.word
            var color   = settings.color
            var evtType = settings.evtType
     
            // default
            var defColor = $that.css('color')
            var defVal   = $that.val()
     
            if (defVal == '' || defVal == word) {
                $that.css({color: color}).val(word)
            } else {
                $that.css({color: defColor})
            }
     
            function switchStatus(isDef) {
                if (isDef) {
                    $that.val('').css({color: defColor})   
                } else {
                    $that.val(word).css({color: color})
                }
            }
            function asFocus() {
                $that.bind(evtType, function() {
                    var txt = $that.val()
                    if (txt == word) {
                        switchStatus(true)
                    }
                }).bind('blur', function() {
                    var txt = $that.val()
                    if (txt == '') {
                        switchStatus(false)
                    }
                })
            }
            function asKeydown() {
                $that.bind('focus', function() {
                    var elem = $that[0]
                    var val  = $that.val()
                    if (val == word) {
                        setTimeout(function() {
                            // 光标定位到首位
                            $that.setCursorPosition({index: 0})
                        }, 10)                 
                    }
                })
            }
     
            if (evtType == 'focus') {
                asFocus()
            } else if (evtType == 'keydown') {
                asKeydown()
            }
     
            // keydown事件里处理placeholder
            $that.keydown(function() {
                var val = $that.val()
                if (val == word) {
                    switchStatus(true)
                }
            }).keyup(function() {
                var val = $that.val()
                if (val == '') {
                    switchStatus(false)
                    $that.setCursorPosition({index: 0})
                }
            })
        }
     
        return this.each(function() {
            var $elem = $(this)
            bootstrap($elem)
            if ($.isFunction(callback)) callback($elem)
        })
    }

    线上示例：http://snandy.github.io/lib/ui/demo/placeholder/b.html

    会用到 setCursorPosition。

    方式二 

    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    $.fn.placeholder = function(option, callback) {
        var settings = $.extend({
            word: '',
            color: '#999',
            evtType: 'focus',
            zIndex: 20,
            diffPaddingLeft: 3
        }, option)
     
        function bootstrap($that) {
            // some alias
            var word    = settings.word
            var color   = settings.color
            var evtType = settings.evtType
            var zIndex  = settings.zIndex
            var diffPaddingLeft = settings.diffPaddingLeft
     
            // default css
            var width       = $that.outerWidth()
            var height      = $that.outerHeight()
            var fontSize    = $that.css('font-size')
            var fontFamily  = $that.css('font-family')
            var paddingLeft = $that.css('padding-left')
     
            // process
            paddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft
     
            // redner
            var $placeholder = $('<span class="placeholder">')
            $placeholder.css({
                position: 'absolute',
                zIndex: '20',
                color: color,
                 (width - paddingLeft) + 'px',
                height: height + 'px',
                fontSize: fontSize,
                paddingLeft: paddingLeft + 'px',
                fontFamily: fontFamily
            }).text(word).hide()
     
            // 位置调整
            move()
     
            // textarea 不加line-heihgt属性
            if ($that.is('input')) {
                $placeholder.css({
                    lineHeight: height + 'px'
                })
            }
            $placeholder.appendTo(document.body)
     
            // 内容为空时才显示，比如刷新页面输入域已经填入了内容时
            var val = $that.val()
            if ( val == '' && $that.is(':visible') ) {
                $placeholder.show()
            }
     
            function hideAndFocus() {
                $placeholder.hide()
                $that[0].focus()
            }
            function move() {
                var offset = $that.offset()
                var top    = offset.top
                var left   = offset.left
                $placeholder.css({
                    top: top,
                    left: left
                })
            }
            function asFocus() {
                $placeholder.click(function() {
                    hideAndFocus()
                    // 盖住后无法触发input的click事件，需要模拟点击下
                    setTimeout(function(){
                        $that.click()
                    }, 100)
                })
                // IE有些bug，原本不用加此句
                $that.click(hideAndFocus)
                $that.blur(function() {
                    var txt = $that.val()
                    if (txt == '') {
                        $placeholder.show()
                    }
                })
            }
            function asKeydown() {
                $placeholder.click(function() {
                    $that[0].focus()
                })
            }
     
            if (evtType == 'focus') {
                asFocus()
            } else if (evtType == 'keydown') {
                asKeydown()
            }
     
            $that.keyup(function() {
                var txt = $that.val()
                if (txt == '') {
                    $placeholder.show()
                } else {
                    $placeholder.hide()
                }
            })
     
            // 窗口缩放时处理
            $(window).resize(function() {
                move()
            })
     
            // cache
            $that.data('el', $placeholder)
            $that.data('move', move)
     
        }
     
        return this.each(function() {
            var $elem = $(this)
            bootstrap($elem)
            if ($.isFunction(callback)) callback($elem)
        })
    }  

    线上示例：http://snandy.github.io/lib/ui/demo/placeholder/a.html

    方式2 对于以下场景不适合

    1. input初始隐藏

    　　此时无法取到input的offset，继而无法定位span到input上面。

    2. 包含input的页面dom结构发生变化

    　　比如页面里删除了一些元素或添加了一些元素，导致input向上或向下偏移，而此时span则没有偏移（span相对body定位）。这比较恶心，可以考虑把span作为input的兄弟元素，即相对内层div定位（而不是body）。但这样必须强制给外层div添加position:relative，添加后可能会对页面布局产生一定影响。

    相关：

    http://www.w3.org/TR/2009/WD-html5-20090825/forms.html#the-placeholder-attribute

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder
  • 相关阅读:
    我拒绝接受的几个最佳编程实践方法
    女人千万别写代码
    Visual Studio原生开发的10个调试技巧（二）
    20个很有用的PHP类库
    8个开发必备的PHP功能
    青少年如何使用 Python 开始游戏开发
    rmdir 删除空目录
    rm 删除文件或目录
    mv 移动或重命名文件
    cp 复制文件或目录
  • 原文地址：https://www.cnblogs.com/tanlujia/p/6361565.html
Copyright © 2011-2022 走看看