Как удалить значение по умолчанию input on focus

У меня есть поле ввода, в котором по умолчанию текстовое значение. Как удалить этот текст, когда пользователь фокусируется на поле::

код

<input type="text" name="kp1_description" value="Enter Keypress Description">
9
default input jquery onfocus

9 ответов

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

Это должно сделать это.

Обновлено, забыл, что фокус не имеет 2-го параметра для события фокусировки, потому что его нет, он должен быть прикован к размытию:

http://jsfiddle.net/hDCsZ/

вы также должны подумать о создании своей собственной функции для этого, например:

$.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);
        });
    });
}

тогда используйте так

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

Не делай этого таким образом. Использование скрипта водяных знаков jQuery: http://code.google.com/p/jquery-watermark/

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

есть много вещей, которые вы должны учитывать, если вы делаете это вручную. Например, что происходит, когда текстовое поле теряет фокус? Если нет значения, вы хотите прочитать свой вспомогательный текст. Если есть, вы бы хотели почтить эти изменения.

просто проще позволить другим людям делать тяжелый подъем:)

8

С HTML5 вы можете сделать это без Javascript: просто используйте placeholder вместо value. Я думаю, что это хорошее дополнение, но конечно нужно сначала проверить совместимость браузера.

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

Я думаю, это поможет

4
$('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);
    });
});
3

var defaultForInput = "abc";

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

при отправке формы проверьте, является ли значение ввода (id= "myTextInput") "пустой строкой", если это так, замените его (defaultForInput).

1

Супер Пупер Короткая Версия

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

HTML:

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

код Javascript:

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

это все, я надеюсь, что это поможет.

0

Простой JavaScript:

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

это сохраняет значение в заполнителе вместо его полного удаления. Если вам это не нравится, удалите строку-заполнитель.

0