如何在不失去焦点的情况下存储文本框的值?

时间:2014-01-24 19:00:24

标签: javascript jquery text local-storage

我正在尝试将值存储在文本框中。如果我在文本框中输入一个值,然后在文本框外部单击并刷新它,它工作正常。我想知道是否可以在文本框中输入一个值并直接刷新页面而不在文本框外单击?

这是脚本:

 <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

3 个答案:

答案 0 :(得分:2)

执行此操作的简单方法是在表单字段中侦听keyup事件而不是更改事件。

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

这是一个更新的小提琴,演示了这将如何工作。 http://jsfiddle.net/hb8eW/16/

...这里有一个快速的小提琴,演示了jQuery的按键,键盘和更改事件之间的区别。请注意,在不同事件之后更新内容(并且按键始终是后面的一个字符)。 http://jsfiddle.net/krainey/UhR85/

您可以在此处阅读关键字: http://api.jquery.com/keyup/

答案 1 :(得分:2)

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

使用keyup事件代替change事件。

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

答案 2 :(得分:0)

只有在文本框失去焦点时才会触发更改事件。您可以使用keyup事件立即刷新。