Question

我设计了一个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>

Answer 1

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

Answer 2

尝试

使用一个hiddenfield并在点击一个按钮后将值设置为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';
  }
}

Answer 3

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

btn.innerHTML=localStorage.btn_value


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

这应该有用......

Answer 4

你可以为此制定（半）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';
}

现在，这部分是，让我们调用它，按钮init - 它检查hash的值。假设您使用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'; }

当然，如果你已经使用了hash，你需要包含一个if或者两个:)

Answer 5

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

<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>

即使用户刷新网页，如何在单击后禁用按钮？

5 个答案: