Placeholder的两种实现方法

Placeholder的两种实现方法

两种方式的思路

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

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

NO1.

/**
 * 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)
    })
}

方法一线上演示

NO2.

$.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: (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)
    })
} 

方法二线上演示

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

1. input初始隐藏

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

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

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