Javascript 如果用户刷新网页，如何在单击按钮后禁用该按钮？_Javascript_Html_Css

Javascript 如果用户刷新网页，如何在单击按钮后禁用该按钮？

javascript html css

Javascript 如果用户刷新网页，如何在单击按钮后禁用该按钮？,javascript,html,css,Javascript,Html,Css,我设计了一个HTML5+JavaScript移动网页。在我的页面中，我有一个名为“提交”的按钮。当我点击它时，按钮值将变为“完成”。但如果我在单击“提交”按钮后刷新页面，则会出现按钮（“提交”）的默认值我需要的是，一旦我点击了那个按钮，它的值应该只“完成”，即使用户刷新他的页面。有什么具体的方法可以做到这一点吗 <style> .selectBtn{height:60px;width:80px; background-color:yellow;} #abc{background

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


.选择BTN{高度：60px；宽度：80px；
背景色：黄色；}
#abc{背景色：灰色；高度：100%；宽度：60%；}
content=document.getElementById（'abc'）；
函数dx（）{
var Btn=document.createElement（'button'）；
Btn.type='button'；Btn.className='selectBtn'；
Btn.innerHTML='Submit'；
Btn.onclick=函数（）
{
这个.innerHTML='Done'；
}
内容。附加子项（Btn）；
}
dx（）；

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

试试看

单击按钮后使用一个hiddenfield并将值设置为true，当用户刷新pageload时，如果该值设置为true，则会激发该值，并将按钮名称更改为done

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';
  }
}

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

btn.innerHTML=localStorage.btn_value


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

这应该是可行的…

你可以找到一种（半）HTML5的方法来解决这个问题

当您单击该按钮时，还可以更改URL。然后，您可以在服务器上将按钮的值设置为“done”。或者您的服务器端代码可以忽略这一点，您可以使用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';
}

现在，我们称这部分为ButtonInit，它检查哈希值。假设您使用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'；
}否则{
Btn.innerHTML='Submit'；
}

当然，如果您已经使用了哈希，则需要包含一个if或两个：）
会话存储如何？该按钮将显示“完成”，直到用户关闭窗口或选项卡
<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>


.选择BTN{高度：60px；宽度：80px；
背景色：黄色；}
#abc{背景色：灰色；高度：100%；宽度：60%；}
content=document.getElementById（'abc'）；
函数dx（）{
var Btn=document.createElement（'button'）；
Btn.type='按钮'；
Btn.className='selectBtn'；
Btn.innerHTML='Submit'；
Btn.onclick=函数（）{
这个.innerHTML='Done'；
sessionStorage.done=true；
}
if（sessionStorage.done）{
Btn.innerHTML='Done'；
}
内容。附加子项（Btn）；
}
dx（）；
仅使用客户端代码无法完成此操作。您可以对localStorage执行类似的操作，但在用户在客户端清除该操作之前，该操作仍然有效。go和google localStorage.getItem或localStorage.setItem:）这可能是保护按钮实际状态的一个想法。按钮的标签应该完成多长时间？如果用户关闭窗口并重新打开页面，会发生什么情况？cookie是另一个不好的选项：）t.niese：在用户退出网页之前，应该禁用它。存储服务器端还需要一个cookie。删除cookie意味着丢失有关用户/会话的信息。因此，它实际上并不更可靠。@t.niese好吧，您可以存储用户代理和/或用户ip，而不需要cookie。但我必须承认它仍然是可以作弊的，除非实现了功能齐全的登录（用户会话）系统。谢谢大家。然后我会尝试将其存储在服务器端。IP可能会发生变化（例如，当使用移动设备时，如果切换到不同的小区，则可能具有不同的IP）。或者，IP也可以在公司中共享（如果是集中管理的设置，则用户代理也将是相同的）。无论如何，cookie和服务器端存储绝对是一个有效的解决方案。重新加载时，隐藏字段也将再次具有默认值。有些浏览器在重新加载时会保留输入字段的状态（我不知道隐藏字段是否也是如此），但不是每一个。通过DOM创建的按钮是否支持本地存储？@jmjlocalstorage
是更强大的cookie
。您可以查看以下信息：@jmjlocalstorage是一个简单的存储，它不关心DOM。按钮代码本身使用localStorage。@t.niese我想说的是，它的缺点只是HTML5：）localStorage就像@zladuric所说的那样。既然您正在谈论HTML5，我想您正在使用的浏览器很有可能支持本地存储。