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

Question

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.

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>

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();
        });

Thanks in advance.

Answer 1

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

FIDDLE

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

Answer 2

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

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

Live example

Answer 3

Try:

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

Jsfiddle

Answer 4

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

You can then use Jquery to handle focus and Blur event for your textbox

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

Live Demo