保留占位符文本，直到在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

您可以通过设置{hideOnFocus : false} -来使用这个填充库这是一个演示

---

一个普通的方法会更长一些，但是这里是:

这是一个工作演示在提琴

首先，弄清楚你是否需要在第一个地方使用polyfill:

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
        });
    }
}

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

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

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

input.placeholder {
    color: #1A89AD;
}

我们还需要一种将插入符号/光标放置在文本开头的方法:

$.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事件触发时，polyfills通过清除value来工作。但不是我们，老兄。为了解决这个问题，我们将听三个不同的事件。我们想知道控件何时聚焦(mouseup keyup)，何时开始输入(keydown)，以及何时完成输入(keyup)。

当元素获得焦点时，我们希望将光标移动到开始位置。由于chrome在焦点事件期间设置光标的方式很复杂，我们不得不改为听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键将在下一个字段上触发一个keyup，而不是当前字段，如果按下的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);
      }
});

差不多了。查看完整的代码示例。