在 jQuery Mobile 中保留文本输入值

Question

我在 jQuery Mobile 中发现了一些奇怪的行为，我什至可以在演示网站上重现这些行为：

1. 直接转至http://jquerymobile.com/test/docs/forms/textinputs/
2. 在文本输入中输入内容
3. 点击页面上的任意链接，享受 ajax-y 动画
4. 使用浏览器的后退按钮返回

结果：文本输入中输入的文本还在。这就是我要的。

但是，如果您来自网站上的某个地方，这会中断：

1. 转至http://jquerymobile.com/test/docs/forms/
2. 点击“文本输入”
3. 从上面执行步骤 2 到 4

结果：文本输入中输入的文本已经消失。这不是我想要的。

我在 Chrome for Desktop 和 Windows Phone 模拟器上对此进行了测试，两者都表现出相同的行为。我该怎么做才能始终保留在文本输入中输入的文本？就我而言，这是一个搜索框。我希望用户在从搜索结果返回后能够优化搜索词，而无需再次输入所有内容。

Answer 1

这是因为，当您来自 docs/forms 时，ajax 在开始时被禁用。那么，jQueryMobile 禁用 dom-cache。您可以通过在加载 jquerymobile.js 之前添加它来强制 dom 缓存：

$(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.domCache = true;
});

编辑：

我的解决方案有效，我刚刚尝试过：

• 继续my demo page;

• 点击“文本输入”

• 在“文本输入”中输入内容：

• 点击左侧的“搜索输入”（我的演示中只有一些链接有效）

• 使用浏览器的后退按钮返回

你的文字还在！

（注意：page 显示原始版本，有问题，所以没有 domCache，以证明当我复制 jQueryMobile-Docs 页面进行演示时我没有更改任何其他内容）。

Answer 2

请尝试一下，它挽救了许多人的生命。

 $.extend(  $.mobile , {
        ajaxEnabled      : false,
        hashListeningEnabled: false
    });

可以在以下链接上阅读更多内容。

http://forum.jquery.com/topic/jquery-mobile-true-browser-back-button-issue

Answer 3

我发现最可靠的方法是使用 pagebeforehide 将数据存储在本地存储中，并在需要时使用 pagebeforeshow 将其放回