Here's a Working Demo in Fiddle

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

一个回归的方法会有点长，但这里有：

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

通常情况下，polyfill会在value事件触发时清除onfocus。但不是我们，对吧。为了解决这个问题，我们将听取三个不同的事件。我们想知道控件何时聚焦（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上我们可以根据需要替换文本。由于标记字段为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);
      }
});

几乎就是这样。请参阅完整代码示例的小提琴。

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

1 个答案:

Here's a Working Demo in Fiddle