保留占位符文本，直到在 IE9 中输入至少一个字符

Question

我正在使用此修复程序http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 来处理 IE 的占位符功能，它可以正常工作，但我希望占位符文本保留到至少输入一个字符为止。我尝试了以下对我不起作用的方法（星号 (**) 中的位是我的补充：

if (input.val() == input.attr('placeholder') **&& input.val().length>0** ) {
    input.val('');
    input.removeClass('placeholder');    
}

谢谢

Answer 1

您可以将此 polyfill library 与设置 {hideOnFocus : false} 一起使用 - Here's a demo

---

Homerolled 方法会更长一些，但这里是：

Here's a Working Demo in Fiddle

首先，弄清楚你是否need to use a polyfill in the first place：

function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

然后选择具有占位符属性[placeholder] 的所有内容并循环遍历每个内容：

function placeholderPolyfill() {
    // added for purposes of debugging on modern browsers
    var alwaysUsePolyfill = true;

    if (alwaysUsePolyfill || !placeholderIsSupported()) {
        $("input[placeholder]").each(function() {
            // place code here
        });
    }
}

对于每个元素，我们希望为控件的value 分配placeholder 中的值并添加一个类，以便我们可以使它看起来与常规输入文本不同：

$(this).val(this.placeholder)
       .addClass('placeholder')

这里我使用蓝色阴影来帮助区分它以进行调试，但您可能想要选择灰色阴影。

input.placeholder {
    color: #1A89AD;
}

我们还需要place the caret/cursor at the beginning of the text：

$.fn.selectRange = function(start, end) {
    if(!end) end = start; 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

通常，当onfocus 事件触发时，polyfill 会通过清除value 来工作。但不是我们，对的人。为了解决这个问题，我们将监听三个不同的事件。我们想知道控件何时获得焦点 (mouseup keyup)、何时开始输入 (keydown) 以及何时完成输入 (keyup)。

这是每一个：

当元素获得焦点时，我们希望将光标移动到开头。因为complications with the way chrome sets the cursor during the focus event，我们不得不听mouseup和keyup代替。

.on('mouseup keyup': function(e) {
     // if we moused or tabbed in
     if (e.type == "mouseup" ||  e.keyCode == 9) {
         // pretend like their are no chars
         $(this).selectRange(0);
     }
});

当有人开始输入时，如果当前值等于占位符值，那么我们将清除文本以便为更多输入腾出空间。如果需要，我们可以在 keyup 上替换文本。由于 tab 键通过字段将 fire a keyup on the next field, not the current one，如果按下的 keydown 是 tab 键，我们也会手动触发 keyup 事件。

.on('keydown': function(e)
     // check if we still have the placeholder
     if (this.value == this.placeholder) {
         $(this).val('').removeClass('placeholder'); 
     } 
     // if tab key pressed - run keyup now
     if (e.keyCode == 9) {
         $(this).trigger('keyup');
     }
});

最后，当按键注册完成后，让我们重新检查输入。如果我们没有任何值，我们要么清除了该区域，要么删除了最后一个字符。无论哪种方式，让我们重新填充该值，添加回占位符类，并再次将插入符号设置为开头：

.on('keyup': function(e)
      // if we're back to zero 
      if (this.value.length === 0) {
          // add placeholder back
           $(this).val(this.placeholder)
                  .addClass('placeholder')
                  .selectRange(0);
      }
});

差不多就是这样。请参阅小提琴以获取完整的代码示例。