即使用户刷新网页，如何在单击按钮后仍禁用按钮？
[英]How to disable a button after clicking it eventhough user refreshes the webpage?
问题描述
我设计了一个HTML 5 + JavaScript移动网页。 在我的页面中，我有一个名为“提交”的按钮。 当我单击它时，按钮的值将更改为“完成”。 但是，如果我在单击“提交”按钮后刷新页面，则会显示button（“提交”）的默认值。
我需要的是，一旦单击该按钮，即使用户刷新了页面，它的值也应该只是“完成”。 有什么具体方法可以做到吗？
<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
您可以在cookie中存储有关是否单击按钮的信息。 您可以使用javascript设置和读取此cookie，并在cookie存在或具有特定值的情况下禁用按钮。 这很容易进行，用户可以删除或修改cookie。 如果您需要使其更可靠，则需要将其存储在服务器端。
解决方案2
0 2013-07-19 12:50:24
尝试
单击一个按钮后，使用一个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
您可以使用localStorage来存储按钮的值，并在用户重新启动网页时加载它。
btn.innerHTML=localStorage.btn_value
Btn.onclick = function()
{
this.innerHTML='Done';
localStorage.btn_value=this.innerHTML;
}
这应该工作...
解决方案4
0 2013-07-19 13:01:41
您可以为此设计一种（半）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';
}
现在，我们将其称为按钮初始化-它检查哈希值。 假设您使用Java脚本初始化了按钮。
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('#done' == window.location.hash) { Btn.innerHTML = 'Done'; } else { Btn.innerHTML = 'Submit'; }
当然，如果您已经使用过哈希，则需要包含一个或两个:)
解决方案5
0 2013-07-19 13:14:52
会话存储如何？ 该按钮将显示“完成”，直到用户关闭窗口或选项卡
<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>
单击后如何在固定的时间间隔内禁用单选按钮？
[英]How to disable the radio button for a fixed interval of time after clicking them?
单击后如何在固定的时间间隔内禁用单选按钮
[英]How to disable the radio button for a fixed interval of time after clicking them
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.