使用jQuery的焦点输入的隐藏/显示文本值模糊(Hide/Show value text of I

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

这是我目前的HTML代码。

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

同样地，我试过一个其他thing.When重点是（文本框A），一个新的文本框（B）出现，当焦点未到（A），B送过来disappeared.But是wrong.I需要用户输入一些东西在乙栏also.Now我需要的东西this.When对焦距离为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';
    }
})​;​

小提琴

如果旧的浏览器are'nt一个问题，你并不真正需要此javascript：

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

小提琴

Answer 2:

尝试：

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

的jsfiddle

Answer 3:

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

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

活生生的例子

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");
                                       })​;​​

现场演示

文章来源: Hide/Show value text of Input on focus and blur using jQuery