javascript - 在页面之间来回移动时，它保留输入值而不是 jQuery 设置的文本

Question

我有一个包含空文本输入、空跨度和以下代码的页面:

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

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

我怎样才能使返回页面时 span 保持输入的值？

谢谢!

编辑:我想我已经找到了解决方案。

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

Answer 1

如果您通过点击“后退”按钮或从您的本地硬盘驱动器浏览返回页面，您遇到的行为是正常的 - 在这种情况下，您看到的是页面的缓存版本。表单字段可以缓存它们的值，但是 span 本身没有“值”，它有内容，但该内容不会被缓存。

如果您通过单击链接或输入地址(引起 HTTP 请求的事情)返回页面，文本字段将不会显示上次的最后一个值，它将显示其默认值。

除了您已有的代码之外，您只需要一个脚本，该脚本会在页面准备就绪后立即触发，将 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);
  });

});