使用jQuery隐藏/显示焦点和模糊的输入值文本 [英] Hide/Show value text of Input on focus and blur using jQuery

问题描述

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

I have value attribute of an input. I need it to disappear on focus for that particular textbox, and reappear on blur, if the textbox has no content.

这是我当前的HTML代码。

This is my current HTML code.

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

同样我尝试了另外一件事。当焦点在（文本框A）时，一个新的文本框（B ）出现，当焦点出来时（从A开始），B消失了。但这里有些不对劲。我需要用户在Box B中输入一些内容。现在我需要这样的东西。当焦点从A和B出来时，只有这样B才会消失。
注意：页面上有多个文本框。
这是代码。

Similarly i tried one other thing.When focus is in(Textbox A),a new textbox(B) appears and when focus is out(From A),B gets disappeared.But here is something wrong.I need the user to enter something in Box B also.Now i need something this.When focus is out from A as well B,only then B should disappear. Note:There are number of text box on the page. This is Code for it.

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

提前致谢。

推荐答案

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

FIDDLE

如果老版浏览器没问题，你就不要我真的需要javascript：

If older browsers are'nt an issue, you don't really need javascript for this:

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

FIDDLE

这篇关于使用jQuery隐藏/显示焦点和模糊的输入值文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！