使用jQuery隐藏/显示Input的值文本并进行模糊处理

Question

我有输入的value属性。 如果文本框没有内容，我需要使它消失在焦点上，并重新显示在特定的文本框上。

这是我当前的HTML代码。

 <label>First Name</label></td>
 <input class="required" type="text" name="firstname" value="Fill" id="firstname" /><span>(required)</span>

同样，我尝试了另一件事。当焦点位于（文本框A）中时，会出现一个新的文本框（B），而当焦点不在（从A）中时，B消失了。但是这里出了点问题。我需要用户输入现在我还需要一些东西。当焦点同时从A和B移出时，只有B消失了。 注意：页面上有多个文本框。 这就是它的代码。

$('#lastname').focusin(function () {
        $('input.hidden').fadeIn(1000);
        $('input.hidden').css('backgroundColor', 'yellow');
        }).focusout(function () {
        $('input.hidden').hide();
        });

提前致谢。

Answer 1

​$("#firstname")​.on({
    focus: function() {
        if (this.value==='Fill') this.value = '';
    },
    blur: function() {
        if (this.value==='') this.value = 'Fill';
    }
})​;​

小提琴

如果较旧的浏览器不是问题，那么您实际上不需要javascript：

<label>First Name</label>
<td> 
    <input placeholder="Fill" id="firstname" />
    <span>(required)</span>
</td>​

小提琴

Answer 2

var fill = $('#firstname').val();

$('#firstname').on('focus', function() {
    $(this).val('');
}).on('blur', function() {
    if ($('#firstname').val() == "") {
        $(this).val(fill);
    }
});​

现场例子

Answer 3

尝试：

$(".required").on("blur", function(){
  $(this).attr("value", "Fill");
}).on("focus", function(){
  $(this).attr("value", "");
});

杰斯菲德尔

Answer 4

<input type="text" id="sample" value="Fill"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

然后，您可以使用Jquery处理textbox focus和Blur事件

     $('#sample')​.on("focus",function(){
             $(this).val("");
            }).on("blur",function(){
             $(this).val("Fill");
                                       })​;​​

现场演示