jquery - 使用jQuery在焦点和模糊上隐藏/显示输入的值文本

Question

我有输入的值属性。如果文本框没有内容，我需要它消失在该特定文本框的焦点上，并重新出现在模糊中。

这是我当前的 HTML 代码。

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

同样，我尝试了另一件事。当焦点位于（文本框 A）时，会出现一个新的文本框（B），而当焦点不在（来自 A）时，B 会消失。但这里出了点问题。我需要用户输入一些东西在盒子 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的处理focus和Blur事件textbox

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

现场演示