Как убрать значение по умолчанию для ввода в фокусе

Question

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

CoDE

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

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

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

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

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

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

Answer 6

Короткая версия Super Duper

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

Answer 7

var defaultForInput = "abc";

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

---

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

Answer 8

Простой JavaScript:

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

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

Answer 9

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>

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