Question

我发现以下功能可以在IE6-9这样的浏览器上启用占位符效果。问题是占位符在第一次聚焦后出现。没有初始值。页面加载后输入框只是空白。

另一件事是，在教程中我创建了.placeholder类并将颜色设置为灰色。它将输入颜色设置为浅灰色，并且在用户输入时不会变为黑色。

var isInputSupported = 'placeholder' in document.createElement('input');
    var isTextareaSupported = 'placeholder' in document.createElement('textarea');
    if (!isInputSupported || !isTextareaSupported) {
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '') {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
                input.data('placeholder', true);
            } else {
                input.data('placeholder', false);
            }
        }).blur().parents('form').submit(function () {
            $(this).find('[placeholder]').each(function () {
                var input = $(this);
                if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                    input.val('');
                }
            })
        });
    }

有什么建议吗？

Answer 1

为解决占位符最初未显示的问题，您需要在页面加载时初始化每个占位符，如下所示：

$('[placeholder]').each(function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.val($this.data('placeholder')).addClass('placeholder');
    }
});

文本颜色的问题是在焦点或模糊时添加/删除.placeholder类，而不是在用户键入时。您需要为keyup添加一个额外的事件处理程序来删除.placeholder类（这也包括我上面的代码段）：

var isInputSupported = 'placeholder' in document.createElement('input');
var isTextareaSupported = 'placeholder' in document.createElement('textarea');
if (!isInputSupported || !isTextareaSupported) {
     $('[placeholder]').each(function(){
        var $this = $(this);
        if($this.val() == ''){
        $this.val($this.data('placeholder')).addClass('placeholder');
        }
    });
    $('[placeholder]').focus(function () {
        var input = $(this);
        if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).on('keyup', function(){
            $(this).removeClass('placeholder')
    }).blur(function () {
        var input = $(this);
        if (input.val() == '') {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
            input.data('placeholder', true);
        } else {
            input.data('placeholder', false);
        }
    }).blur().parents('form').submit(function () {
        $(this).find('[placeholder]').each(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                input.val('');
            }
        })
    });
}

Jquery函数奇怪的行为

1 个答案: