2

我设计了一个 HTML 5 + JavaScript 移动网页。在我的页面中，我有一个名为“提交”的按钮。当我单击它时，按钮值将更改为“完成”。但是，如果我在单击“提交”按钮后刷新页面，则会出现按钮（“提交”）的默认值。

我需要的是一旦我点击了那个按钮，它的价值应该只是“完成”，即使用户刷新了他的页面。有什么具体的方法可以做到这一点吗？

<style>
.selectBtn{height:60px;width:80px;
background-color:yellow;}
#abc{background-color:gray;height:100%;width:60%;}
</style>
</head>
<body><div id='abc'></div>
<script>
content = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';Btn.className = 'selectBtn';
Btn.innerHTML = 'Submit';
Btn.onclick = function()
{
this.innerHTML='Done';
}
content.appendChild(Btn);   
}
dx();
</script>
4

5 回答 5

0

尝试

使用一个隐藏字段并在单击按钮后将值设置为 true，并且当用户刷新页面加载时，如果该值设置为 true，则将按钮名称更改为完成

Btn.onclick = function()
{
  this.innerHTML='Done';
  var hdnvalue=document.getElementById("hiddenfield1");
  hdnvalue.value="true";
 }

function pageload()
{
   var hdnvalue=document.getElementById("hiddenfield1");
  if(hdnvalue=="true")
  {
    Btn.innerHTML='Done';
  }
}
于 2013-07-19T12:50:24.357 回答
0

您可以使用 localStorage 来存储按钮的值，并在用户重新启动网页时加载它。

btn.innerHTML=localStorage.btn_value


Btn.onclick = function()
{
this.innerHTML='Done';
localStorage.btn_value=this.innerHTML;
}

这应该工作...

于 2013-07-19T12:54:16.950 回答
0

您可以为此制定一个（半）HTML5 方式。

当您单击按钮时，还更改了 URL。然后您可以在服务器上将按钮的值设置为“完成”。或者你的服务器端代码可以忽略这个，你使用 JS 来修复它。

这里的纯 javascript 解决方案：首先 - 更改提交时的哈希值。

Btn.onclick = function () {
  // do Ajaxy submit here
  MyFramework.Ajax.submit();
  // now alter the hash
  // also, you could also move this in the ajax callback function 
  // - to make sure the submit worked.
  window.location.hash = 'done';
}

现在，这部分是，我们称之为按钮初始化——它检查哈希值。假设您使用 Javascript 初始化按钮。

Button.init = function { // or onPageLoad or whatever
  if('#done' == window.location.hash) {
    Button.setLabel('Done'); // or variation thereof
  }
};

编辑：刚刚看到你已经有 init 函数：dx，所以将行更改Btn.innerHTML = 'Submit';为 if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; }

当然，如果您已经使用哈希，则需要包含一个 if 或两个 :)

于 2013-07-19T13:01:41.707 回答
0

会话存储怎么样？该按钮将显示“完成”，直到用户关闭窗口或选项卡

<style>
.selectBtn{height:60px;width:80px;
  background-color:yellow;}
#abc{background-color:gray;height:100%;width:60%;}
</style>
</head>
<body><div id='abc'></div>
<script>
content = document.getElementById('abc');

function dx(){
  var Btn = document.createElement('button');
  Btn.type = 'button';
  Btn.className = 'selectBtn';
  Btn.innerHTML = 'Submit';
  Btn.onclick = function() {
    this.innerHTML='Done';
    sessionStorage.done = true;
  }
  if (sessionStorage.done) {
    Btn.innerHTML = 'Done';
  }
  content.appendChild(Btn);   
}

dx();
</script>
于 2013-07-19T13:14:52.600 回答
0

您可以将有关是否单击按钮的信息存储在 cookie 中。您可以使用 javascript 设置和读取此 cookie，如果 cookie 存在或具有特定值，则禁用按钮。这很容易作弊，用户可以删除或修改cookies。如果您需要它更可靠，则需要将其存储在服务器端。

于 2013-07-19T12:48:24.097 回答