js兼容的placeholder屬性詳解

2019-11-20 22:23:33

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

作為一個(gè).net后臺(tái)開(kāi)發(fā)的程序猿，博客里既然大多都是前端相關(guān)的博文。是不是該考慮換方向了，轉(zhuǎn)前端開(kāi)發(fā)得了 ...

小小吐槽一下，近期受該不該跳槽所困惑，我有選擇困難癥！

繼續(xù)前端，這次說(shuō)一下輸入框 placeholder 這個(gè)屬性。

html5 的新屬性，就是在輸入框沒(méi)輸入值的時(shí)候，顯示的提示文字（自己的理解），例如：

貌似很好用，但也只能在支持 html 的瀏覽器版本中顯示，而對(duì)于不能支持的瀏覽器版本，讓我這種極力追求完美的開(kāi)發(fā)者來(lái)說(shuō)是很不舒服的一件事。

上網(wǎng)找了很多資料，有很多大牛人都已經(jīng)有了解決方案了，不過(guò)或多或少都有些缺陷，這里我做一個(gè)整合和修改：

（忘記看了多少別人的代碼了，也忘了地址是什么，在此對(duì)其他原作者說(shuō)聲抱歉，若有版權(quán)問(wèn)題請(qǐng)聯(lián)系我！ -.-）

這種擴(kuò)展，在我看來(lái)就像是對(duì)瀏覽器界面功能做一次美容，而我始終堅(jiān)持，自然的才是最美的。所以在支持這種屬性的瀏覽器版本中，我就不多手再去做其他的修改了。

首先判斷是否已支持該屬性：

復(fù)制代碼代碼如下:

if (!('placeholder' in document.createElement('input'))) { }

如果不支持，工作來(lái)了。

取出所有擁有 placeholder 屬性的 input:text / input:password / textarea，取出各自的 placeholder 屬性值，然后模仿功能，在每一個(gè)標(biāo)簽后加一個(gè) label 標(biāo)簽，用來(lái)顯示 placeholder 的值，當(dāng)輸入值時(shí)，清空顯示的字符串，當(dāng)刪除輸入值時(shí)，顯示字符串。

復(fù)制代碼代碼如下:

var $element = $(this), placeholder = $element.attr('placeholder');

if (placeholder) {
    // 文本框ID
    var elementId = $element.attr('id');
    if (!elementId) {
        var now = new Date();
        elementId = 'lbl_placeholder' + now.getSeconds() + now.getMilliseconds();
        $element.attr('id', elementId);
    }

    // 添加label標(biāo)簽，用于顯示placeholder的值
    var $label = $('<label>', {
        html: $element.val() ? '' : placeholder,
        'for': elementId,
        css:
            {
                position: 'absolute',
                cursor: 'text',
                color: '#a9a9a9',
                fontSize: $element.css('fontSize'),
                fontFamily: $element.css('fontFamily')
            }
    }).insertAfter($element);

    // 綁定事件
    var _setPosition = function () {
        $label.css({ marginTop: GetStringNumValue($element.css('marginTop')) + 8 + 'px', marginLeft: '-' + (GetStringNumValue($element.css('width')) - 6) + 'px' });
    }
    var _resetPlaceholder = function () {
        if ($element.val()) { $label.html(null); }
        else {
            _setPosition();
            $label.html(placeholder);
        }
    }
    _setPosition();
    $element.on('focus blur input keyup propertychange resetplaceholder', _resetPlaceholder);

代碼很簡(jiǎn)單，需注意的是：

1、label 的 margin-top / margin-left，因?yàn)槲覀兊捻?xiàng)目用了 bootstrap 框架，已設(shè)定了輸入框的內(nèi)間距為 "padding: 4px 6px;" 所以這里需縮進(jìn)對(duì)應(yīng)的像素值。

2、GetStringNumValue() 是我們自己定義的方法，使用正則表達(dá)式，用于把字符串中的數(shù)字提取，例如 "123px" 返回 123。

3、對(duì)于 IE 中不支持的版本，propertychange 真是一個(gè)好方法，完美的結(jié)合了！...

4、擴(kuò)展方法 resetplaceholder，用于使用 js 改變輸入框值時(shí)（賦值、清空），對(duì) placeholder 進(jìn)行值的對(duì)應(yīng)設(shè)置。

效果：

――IE8