Как сохранить значение текстового поля без потери фокуса?

Question

Я пытаюсь сохранить значение в текстовом поле. Он отлично работает, если я ввожу значение в текстовое поле, а затем выхожу за пределы текстового поля и обновляю его. Я хочу знать, можно ли просто ввести значение в текстовое поле и непосредственно обновить страницу, не щелкая вне текстового поля?

Вот сценарий:

<script> 
jQuery(function ($) { 
    if (typeof (window.localStorage) != "undefined") { 
    //set the value to the text fields 
    $("input[type=text]").val(function() { 
     return localStorage.getItem(this.id); 
    }); 

    $("input[type=text]").on("change", function() { 
     localStorage.setItem(this.id, $(this).val()); 
    }); 
    } 
}); 
</script> 

FIDDLE

Answer 1

http://jsfiddle.net/hb8eW/15/

Используйте keyup событие вместо change событие.

$("input[type=text]").on("keyup", function() { 
    localStorage.setItem(this.id, $(this).val()); 
}); 

Answer 2

Событие изменения только срабатывает, когда текстовое поле теряет фокус. Вместо этого вы можете использовать событие keyup для немедленного обновления.

Answer 3

Простым способом сделать это будет прослушивание события keyup в поле формы, а не событие изменения.

$("input[type=text]").on("keyup", function() { 
    localStorage.setItem(this.id, $(this).val()); 
}); 

Вот обновленная скрипка, которая демонстрирует, как это будет работать. http://jsfiddle.net/hb8eW/16/

... и вот небольшая скрипка, демонстрирующая разницу между нажатиями клавиш, нажатиями клавиш и изменениями событий jQuery. Обратите внимание, когда контент обновляется после разных событий (и что нажатие клавиши всегда имеет один символ). http://jsfiddle.net/krainey/UhR85/

Вы можете прочитать о KeyUp здесь: http://api.jquery.com/keyup/