无法使用 jquery 删除占位符

Question

一旦用户关注输入文本字段，我想删除 占位符。

   $('#keyfob').attr('placeholder','Please click here for Key Fob scanning to work');

        $('#keyfob').attr('placeholder', function () {
            this.toggle = !this.toggle;
            return this.toggle ? $(this).data('placeholder') : "";
        });
    }, 1500);

这是我用来显示 blinking 占位符的函数，keyfob 是字段 ID，我已在字段的模糊事件中返回此代码。

所以在这个字段上我必须隐藏或删除闪烁的占位符文本。

$('#keyfob').attr('placeholder','');

这是我用来删除或隐藏占位符的功能，但不知何故它没有隐藏。

谁能帮我解决这个问题？

Answer 1

您可以使用onfocus 和onblur 事件并在它们各自的处理程序中清除或设置占位符的文本。试试这个，

解决方案 1

HTML：

<input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder="Please click here to Key Fob scanning work">

jQuery :

$("#keyfob").on("focus", function(){
    previousElement = $(this);
    placeholderText = $(this).attr("placeholder");
    $(this).attr("placeholder", "");
});

$("#keyfob").on("blur", function(){
    $(previousElement).attr("placeholder", placeholderText);
});

注意： 如果你有多个 input 元素，你只需要引用那些使用相同 class 属性的元素。这将使其他一切正常工作。

jsFiddle

解决方案 2

如果您只有一个输入元素，那么您可以更轻松地处理它。试试这个方法，

$('#keyfob').on("focus blur", function(){
    $(this).attr("placeholder") == "" ? $(this).attr("placeholder", "Please click here for Key Fob scanning to work") : $(this).attr("placeholder", "");
});

jsFiddle

解决方案 3

更新代码： 要使placeholder 闪烁，请将内容placeholder 清空，然后在预定义的setInterval 中再次填充。并且onfocus 使用clearInterval 清除闪光灯setInterval。

jQuery :

previousElement = $("#keyfob");
placeholderText = $("#keyfob").attr("placeholder");

$("#keyfob").on("focus", function(){
    $(this).attr("placeholder", "");
    clearInterval(blinker);
});

$("#keyfob").on("blur", function(){
    $(previousElement).attr("placeholder", placeholderText);
        console.log(previousElement);
    blinker = setInterval(function(){
        $("#keyfob").attr("placeholder") == "" ? $("#keyfob").attr("placeholder", "Please click here for Key Fob scanning to work"): $("#keyfob").attr("placeholder", "");
    }, 1000);
});

$("#keyfob").blur();

jsFiddle