javascript - jQuery函数奇怪的行为

我发现以下功能可在类似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('');
                }
            })
        });
    }

有什么建议？

最佳答案

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

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

关于javascript - jQuery函数奇怪的行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22991648/