jQuery函数奇怪的行为答案

【问题标题】：Jquery function strange behaviourjQuery函数奇怪的行为
【发布时间】：2014-05-24 08:56:53
【问题描述】：

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

有什么建议吗？

【问题讨论】：

准备好后使用焦点。
该代码不会尝试在页面加载时初始化输入字段。这就是为什么它不会发生。
代码看起来应该工作 - 你能提供一些上下文，它不工作吗？也许是一个带有错误的 JSFiddle？
@Pointy 确实如此，它在所有匹配的元素上调用.blur()，当有空值时，它将初始化占位符。
是的，看起来代码在元素存在之前就被触发了。确保您的 Javascript 位于页面底部，或位于 $(document).ready() 处理程序中。

标签： javascript jquery html placeholder

【解决方案1】：

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

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

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

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

【讨论】：

你能用完整的代码添加这个函数吗？我不确定在哪里添加这段代码
嗯，但是你怎么能在不先聚焦的情况下输入文本区域呢？
您不能在不首先关注文本区域的情况下键入它，但是，如果 textarea/input 的值与占位符文本相同，则此代码仅删除 placeholder 类
@S.B.你在页面上发现问题了吗？我在IE8上打开网站。
是的，你是对的；我没有查看您的代码，并假设您使用的是“数据占位符”属性。