按输入启用/禁用表单
按输入启用/禁用表单
提问于 2016-11-16 14:30:00
我有两个输入表格。当它们以默认值加载到浏览器中时，表单将被禁用。
我已经创建了一个脚本函数，它启用了输入表单onclick。然后，用户可以在任何一种形式中更改这些值。
只要任何表单中的值不是默认值，两个窗体都必须保持启用状态。如果用户将输入表单中的两个值都更改为返回其默认值，则表单将再次自动禁用。
这里的问题是，两个输入值都必须是，而不是，这等于窗体保持启用状态的默认值。我在努力解决这个问题。
function enable() {
var x = document.getElementsByClassName("row")
for (i = 0; i < x.length; i++) {
x[i].disabled = false;
}
}
var x = document.getElementsByClassName("row")
function check() {
for (i = 0; i < x.length; i++) {
if (x[i].value == x[i].defaultValue) {
for (i = 0; i < x.length; i++) {
x[i].disabled = true;
}
}
}
}<table>
<tr>
<td onclick="enable()">
<input class="row" type="text" value="click me" disabled onblur="check()">
<input class="row" type="text" value="click me2" disabled onblur="check()">
</td>
</tr>
</table>
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-16 14:45:52
function enable() {
var x = document.getElementsByClassName("row")
for (i = 0; i < x.length; i++) {
x[i].disabled = false;
}
}
var x = document.getElementsByClassName("row")
function check() {
var edited=false;
for (i = 0; i < x.length; i++) {
if (x[i].value != x[i].defaultValue) {
edited=true;
}
}
if(edited)return;
for(i=0; i<x.length; i++){
x[i].disabled=true;
}
}<table>
<tr>
<td onclick="enable()">
<input class="row" type="text" value="click me" disabled onblur="check()">
<input class="row" type="text" value="click me2" disabled onblur="check()">
</td>
</tr>
</table>
你是说像这样的事？
编辑:所以我们要做的是创建一个布尔值来跟踪任何变化。您使用嵌套循环做了一些奇怪的事情，这并不是必要的。如果检测到更改，则编辑将为真。如果两者相同，则将使用“编辑”的默认值(false)。
在第一个for-循环之后，我们检查编辑是否已经完成if(edited)，如果已经进行了编辑，我们将使用return来中断该函数。您还可以使用：
if(!edited){
for(i=0; i<x.length; i++){
x[i].disabled=true;
}
}但我认为使用回报会更干净一些。因此，如果没有编辑(输入默认值)，代码将继续并禁用所有字段。
Stack Overflow用户
发布于 2016-11-16 14:39:40
一个可能的解决办法是：
http://jsfiddle.net/rgghoham/
<span style="position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</span>
<span style="position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</span>
<script>
$("div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});
</script>Stack Overflow用户
发布于 2016-11-16 14:47:58
还有一种可能性。我冒昧地删除了for循环，因为您似乎有一定数量的输入。如果您选择这样做，那么它将应用于启用/可分发函数。调用enable()或more ()也可能使其更易读。
//declare default values here (optional)
var default1 = "click me",
default2 = "click me2";
//enable...
function enable() {
var x = document.getElementsByClassName("row")
for (i = 0; i < x.length; i++) {
x[i].disabled = false;
}
}
//disable...
function disable() {
var x = document.getElementsByClassName("row")
for (i = 0; i < x.length; i++) {
x[i].disabled = true;
}
}
var x = document.getElementsByClassName("row")
function check() {
if (x[0].value == default1 && x[1].value == default2) { //testing your conditions
return disable();
} else {
return enable();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40634687
复制相关文章
相似问题
腾讯云开发者
