js相容的placeholder屬性詳解_javascript技巧

作為一個.net後台開發的程式猿，部落格裡既然大多都是前端相關的部落格文章。是不是該考慮換方向了，轉前端開發得了 ...

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

繼續前端，這次說一下輸入框 placeholder 這個屬性。

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

看起來很好用，但也只能在支援html 的瀏覽器版本中顯示，而對於無法支援的瀏覽器版本，讓我這種極力追求完美的開發者來說是很不舒服的一件事。

上網找了很多資料，有很多大牛人都已經有了解決方案了，不過或多或少都有些缺陷，這裡我做一個整合和修改：

（忘了多少別人的程式碼了，也忘了地址是什麼，在此對其他原作者說聲抱歉，若有版權問題請聯絡我！ -.-）

這種擴展，在我看來就像是對瀏覽器介面功能做一次美容，而我始終堅持，自然的才是最美的。所以在支援這種屬性的瀏覽器版本中，我就不多手再去做其他的修改了。

先判斷是否已支援該屬性：

複製程式碼 程式碼如下:

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

如果不支持，工作來了。

取出所有擁有placeholder 屬性的input:text / input:password / textarea，取出各自的placeholder 屬性值，然後模仿功能，在每個標籤後面加上一個label 標籤，用來顯示placeholder 的值，當輸入值時，清空顯示的字串，當刪除輸入值時，顯示字串。

複製程式碼 程式碼如下:

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

if (placeholder) {
    // 文字方塊ID
    var elementId = $element.attr('id');
    ) {        elementId = 'lbl_placeholder' now.getSeconds() now.getMilliseconds();
      
    // 新增label標籤，用於顯示placeholder的值
    var $label = $('', {

       >        'for': elementId,

        css:
          🎜>                cursor: 'text',
               fontSize: $ element.css('fontSize'),
                fontFamily: $element.css('fontFamily)
    // 綁定事件
    var _setPosition = 綁定事件
    var _setPosition = function () {
        $label.css({ marginTop: GetStringNum  ement.  $label.css({ marginTop: GetStringNumValue($element)(Leopft)($el),7( ' (GetStringNumValue($element.css('width')) - 6) 'px' });
    }
    var _resetPlaceholder = function () { $label.html(null); }
        else {
            _setPosition();

       }

    }
    _setPosition();
$element.on('focus blur input keyup propertychange resetplaceholder', _resetPlaceholder);

程式碼很簡單，要注意的是：

1、label 的margin-top / margin-left，因為我們的專案用了bootstrap 框架，已設定了輸入框的內間距為"padding: 4px 6px;" 所以這裡需縮排對應的像素值。

2、GetStringNumValue() 是我們自己定義的方法，使用正規表示式，用於將字串中的數字提取，例如 "123px" 回傳 123。

3、對於 IE 中不支援的版本，propertychange 真是一個好方法，完美的結合了！ ...

4、擴充方法 resetplaceholder，用於使用 js 改變輸入框值時（賦值、清空），對 placeholder 進行值的對應設定。

效果：

——IE8

——IE9