英文:
Toggle switch not resetting on reload
问题
切换开关保留上次状态，即使重新加载
我正在使用来自W3schools的切换开关(链接)。在W3schools编辑器中，它会在重新加载时回到其已建立的“选中”或“未选中”位置，但出于某种原因 - 如果我“选中”它，然后重新加载，它仍然处于选中状态，或者如果我取消选中它然后重新加载，它仍然处于未选中状态。
对于我正在进行的项目，最初加载/任何重新加载/再次访问时保持未选中状态非常重要。
我很好奇是否是某种缓存问题，因为我是在本地计算机上工作的（使用WordPad编辑HTML，使用Firefox查看文件），但我将我的工作上传到neocities，问题仍然存在，所以我认为这意味着问题出现在代码本身。
如何修复这个问题？
英文:
Toggle switch retains last status, even on reload
I'm using a toggle switch from W3schools (this one). In the W3schools editor, it goes back to it's established "checked" or "unchecked" position on a reload, but for whatever reason - if I "check" mine, and then reload, it stays checked, or if I uncheck it and then reload, it stays unchecked.
It's important for the project that I'm doing for it to be unchecked on initially loading/any reload/revisit.
I was curious if it was some sort of cache issue since I'm working on it locally on my computer (wordpad for editting the html, firefox to view the file) but I uploaded my work to neocities, and the problem persisted so I assume that means it's the code itself.
<head>
<style>
.selector {
background-color:rgba(255, 255, 0, 0.3);
text-align:center;
border:1px solid gold;
width: 50vw;
max-width:500px;
border-radius:2em;
padding:1em;
font-size:20px;
color:gold;
margin:2em auto auto;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: darkblue;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: gold;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: cornflowerblue;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<div class="selector">Unchecked
<label class="switch">
<input type="checkbox" onclick="hoverFunction()">
<span class="slider" alt="toggle switch button"></span>
</label>
Checked</div>
</body>
How can I fix this?
答案1
得分: 1
这是由Firefox引起的。如果您添加标志autocomplete="off"，它应该可以防止此行为，并且您可以使用"checked"或"unchecked"标志设置默认状态。
例如：
<input type="checkbox" onclick="hoverFunction()" autocomplete="off" unchecked>
或者：
<input type="checkbox" onclick="hoverFunction()" autocomplete="off" checked>
英文:
This is caused by Firefox. If you add the flag autocomplete="off" it should prevent this behavior and you can set the default state with either the "checked" or "unchecked" flag.
For example:
<input type="checkbox" onclick="hoverFunction()" autocomplete="off" unchecked>
Or:
<input type="checkbox" onclick="hoverFunction()" autocomplete="off" checked>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论