How to remove default value of input on focus

问题:

I have an input box that has default value text assigned to it. How can I remove this text when the user focuses on the field::

CoDE

<input type="text" name="kp1_description" value="Enter Keypress Description">

回答1:

$(document).ready(function(){
    var Input = $('input[name=kp1_description]');
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
})​

That should do it.

Updated, Forgot that focus does not have a 2nd parameter for the focus-out event because there is none, it has to be chained with blur:

http://jsfiddle.net/hDCsZ/

you should also think about creating your own function for this such as:

$.fn.ToggleInputValue = function(){
    return $(this).each(function(){
        var Input = $(this);
        var default_value = Input.val();

        Input.focus(function() {
           if(Input.val() == default_value) Input.val("");
        }).blur(function(){
            if(Input.val().length == 0) Input.val(default_value);
        });
    });
}

Then use like so

$(document).ready(function(){
    $('input').ToggleInputValue();
})​

回答2:

Don't do it this way. Use a jQuery watermark script: http://code.google.com/p/jquery-watermark/

$("input[name='kp1_description']").watermark("Enter Keypress Description");

There are a lot of things you have to account for if you do it manually. For instance, what happens when the text box loses focus? If there's no value, you'd want to readd your helper text. If there is, you'd want to honor those changes.

Just easier to let other people do the heavy lifting :)

回答3:

With HTML5 you could do it without Javascript: just use placeholder instead of value. I think it's a nice addition, but of course you need to check the browser compatibility first.

回答4:

<input type="text" id="anything" placeholder="enter keypress description">

i think this will help

回答5:

$('input, textarea').each(function () {
    var Input = $(this);
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
});

回答6:

var defaultForInput = "abc";

<input id="myTextInput" type="text" placeholder=defaultForInput />

---

When submitting your form, check if the input(id="myTextInput") value is the 'empty-string', if so substitute it with (defaultForInput).

回答7:

The Super Duper Short Version

$('#input_id').focus(function() {
    $(this).val("");
});

回答8:

HTML:

<form method="post">
  <input type="text" id="customer" value="Username"/>      
  <input type="Submit" value="Login" class="rc" />
</form>

Javascript code:

<script>
$('#customer').on({
    focus:function(){                   
      if(this.value == 'Username') this.value = '';
    },
    blur:function(){
      if(this.value == '') this.value = 'Username';
    }
})
</script>

That's all, I hope it'll help.

回答9:

Plain JavaScript:

(function () {
  let input = document.querySelector ("input[name='kp1_description']");
  input.onfocus = function () {
    this.placeholder = this.value;
    this.value = '';
  };
})();

This keeps the value in the placeholder instead of removing it completely. If you do not like this, remove the placeholder line.