Question

我有一个带有空文本输入，空跨度和以下代码的页面：

$('input').on('input', function(){
    $('span').text(this.value);
});

当我输入输入时，跨度中会出现相同的文字。但是当我在同一浏览器选项卡中转到另一个页面然后再返回时，输入字段仍然填充，但现在跨度为空。

我怎样才能这样做，当你回到页面时，跨度保持输入的值？

谢谢！

编辑：我想我找到了解决方案。

$('input').on('input', function(){
    $('span').text(this.value);
}).not(function(){
    return this.value == '';
}).trigger('input');

Answer 1

如果您通过点击＆＃34;返回＆＃34;返回页面，则您遇到的行为是正常的。按钮或从本地硬盘驱动器浏览 - 在这种情况下，您将看到页面的缓存版本。表单字段可以缓存其值，但span没有＆＃34;值＆＃34;本身，它有内容，而且内容没有被缓存。

如果您通过单击链接或键入地址（导致HTTP请求的内容）返回页面，则文本字段将不显示上一次的最后一个值，它将显示其默认值。 / p>

除了您已有的代码之外，您只需要一个在页面准备就绪后立即触发的脚本，将span重置为input的值。

// You must already have a document.ready event handler, so just add to that:
$(function(){

  // This will restore the span's content to the value of the textbox
  $('span').text($('input').val());

  // This is your original code that wires up the textbox to a click
  // event handler
  $('input').on('input', function(){
    $('span').text(this.value);
  });

});

Answer 2

我倾向于绑定window.popstate（）;

$(window).on("popstate", function (e) {
        //code to refill the span goes here.
});

我用它来反序列化一个可能已更改的查询字符串，但你可能会在这里使用它来达到同样的效果。

在页面之间来回传递时，它保留输入值，但不保留jQuery

2 个答案: