即使用户刷新网页，如何在单击按钮后仍禁用按钮？
[英]How to disable a button after clicking it eventhough user refreshes the webpage?
问题描述
I have designed a HTML 5 + JavaScript mobile webpage. 
我设计了一个HTML 5 + JavaScript移动网页。 In my page i have a button called "submit". 在我的页面中，我有一个名为“提交”的按钮。 When i clicked it-button value will changed to "Done". 当我单击它时，按钮的值将更改为“完成”。 But if i refresh my page after clicking "submit" button, the default value for button("submit") appears. 但是，如果我在单击“提交”按钮后刷新页面，则会显示button（“提交”）的默认值。
What i need is once i clicked that button,it's value should be only "done" even though user refreshes his page. 我需要的是，一旦单击该按钮，即使用户刷新了页面，它的值也应该只是“完成”。 Is there any specific method to do this? 有什么具体方法可以做到吗？
<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>
5 个解决方案
解决方案1
0 已采纳 2013-07-19 12:48:24
You may store information about if button is clicked, in a cookie. 您可以在cookie中存储有关是否单击按钮的信息。 You can set and read this cookie with javascript and disable button if cookie exists or has particular value. 您可以使用javascript设置和读取此cookie，并在cookie存在或具有特定值的情况下禁用按钮。 This is easy-cheatable, user can delete or modify cookies. 这很容易进行，用户可以删除或修改cookie。 If you need it to be more reliable, you need to store it on server side. 如果您需要使其更可靠，则需要将其存储在服务器端。
解决方案2
0 2013-07-19 12:50:24
Try 尝试
Use one hiddenfield and set value to true once button clicked and when user refreshes pageload fires there if the value is set to true change button name to done 单击一个按钮后，使用一个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';
}
}
解决方案3
0 2013-07-19 12:54:16
You can use the localStorage to store the value of the button and load it when the user restarts the webpage. 您可以使用localStorage来存储按钮的值，并在用户重新启动网页时加载它。
btn.innerHTML=localStorage.btn_value
Btn.onclick = function()
{
this.innerHTML='Done';
localStorage.btn_value=this.innerHTML;
}
This should work... 这应该工作...
解决方案4
0 2013-07-19 13:01:41
You could work out a (semi-)HTML5 way for this. 您可以为此设计一种（半）HTML5方法。
When you click the button, also alter the URL has. 当您单击按钮时，还要更改URL。 And you can then set the value of the button to "done" on the server. 然后，您可以在服务器上将按钮的值设置为“完成”。 Or your server-side code can ignore this and you use JS to fix it. 或者您的服务器端代码可以忽略此问题，然后使用JS对其进行修复。
Pure javascript solution here: First - change the hash on submit.. 纯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';
}
Now, this part is, let's call it, button init - it checks for the value of hash. 现在，我们将其称为按钮初始化-它检查哈希值。 Let's say you initialize your button with Javascript. 假设您使用Java脚本初始化了按钮。
Button.init = function { // or onPageLoad or whatever
if('#done' == window.location.hash) {
Button.setLabel('Done'); // or variation thereof
}
};
Edit: Just saw you already have init function: dx , so alter the line Btn.innerHTML = 'Submit'; 编辑：刚刚看到您已经具有init函数： dx ，因此更改行Btn.innerHTML = 'Submit'; to if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; } 到if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; } if('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; }
Of course, if you already do use hash, you need to include an if or two :) 当然，如果您已经使用过哈希，则需要包含一个或两个:)
解决方案5
0 2013-07-19 13:14:52
How about session storage? 会话存储如何？ The button will show "done" until the user closes the window or tab 该按钮将显示“完成”，直到用户关闭窗口或选项卡
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.