使用JavaScript的HTML表单

-4

我有一个HTML表单两个领域禁用领域：使用JavaScript的HTML表单

<input type="text" name="name1"/> 
<input type="text" name="name2"/>

是否有使用JavaScript的方式，如果用户用户输入文本的第一次测试中，第二文本框是禁用的，反之亦然？

来源

2016-02-12 Charley Pearce

提示，请尝试使用onblur事件这也许可能。试试吧，让我们知道 – Obsidian

是的，有一种方法。 – j08691

您可以将“disabled”属性添加到输入标签。 – TheMintyMate

下面是一个非常简单的例子（下面的jsfiddle链路）：

<input type="text" name="name1" id="name1" placeholder="Name 1"/> 
<input type="text" name="name2"id="name2" placeholder="Name 2"/>

var name1 = document.getElementById('name1'), 
    name2 =document.getElementById('name2'); 

name1.onkeyup = function(e) { 
    if (name1.value.length > 0) { 
    name2.setAttribute('disabled', 'disabled'); 
    } else { 
    name2.removeAttribute('disabled'); 
    } 
} 

name2.onkeyup = function(e) { 
    if (name2.value.length > 0) { 
    name1.setAttribute('disabled', 'disabled'); 
    } else { 
    name1.removeAttribute('disabled'); 
    } 
}

https://jsfiddle.net/Neviton/81zzjabk/

来源

2016-02-12 15:57:28 Nevitones

您可以使用jQuery通过禁用未使用keyup()事件与not()方法结合输入的输入来实现。这将是这样的：

$(function() { 
 
    var textLength; 
 
    $('input').keyup(function() { 
 
    textLength = $(this).val().length; 
 
    if (textLength > 0) { 
 
     $('input').not(this).attr('disabled','disabled'); 
 
    } else { 
 
     $('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

input[type="text"]:disabled { 
 
    background: #dddddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="name1"/> 
 
<input type="text" name="name2"/>

来源

2016-02-12 15:24:56 APAD1

如果您想更改要使用哪个文本框，该怎么办？ –

刚刚做了一个编辑，以解决@CharleyPearce让我知道它是否没有意义，我会更新我的代码来演示它。 – APAD1

@CharleyPearce我刚刚添加了代码来删除'disabled'属性，如果用户删除了他们输入的内容。另一个选择是创建一个“重置”按钮，它将清除任一输入的值并删除“disabled”属性。 – APAD1

jQuery的方式：

首先，你必须创建CSS类 '已禁用'。

<style> 
    .disabled { 
    opacity: 0.5; 
    pointer-events: none; 
    } 
</style>

然后，您将事件侦听器“更改”添加到您的输入。

$("input[value='name1']").change(function() { 
    $("input[value='name2']").addClass('disabled'); 
    });

和

$("input[value='name2']").change(function() { 
    $("input[value='name1']").addClass('disabled'); 
    });

这将这样的伎俩。当用户更改输入值时，它会将类“禁用”添加到另一个输入。

来源

2016-02-12 15:28:40 MDD

这是一个清晰的JavaScript的答案。使用禁用属性的优点是，即使列表中也不可能将输入放入其他字段中。

在片段中，如果两个输入字段均为空，禁用也会重置。

var in1 = document.getElementById("input1"), 
 
    in2 = document.getElementById("input2"); 
 

 
function doOnChange() { 
 
    if (in1.value != "") { 
 
    in1.disabled = false; 
 
    in2.disabled = true; 
 
    } else if (in2.value != "") { 
 
    in1.disabled = true; 
 
    in2.disabled = false; 
 
    } if (in1.value == "" && in2.value == "") { 
 
    in1.disabled = false; 
 
    in2.disabled = false; 
 
    } 
 
} 
 

 
in1.addEventListener("keyup", doOnChange); 
 
in2.addEventListener("keyup", doOnChange);

<input id="input1" /> 
 
<input id="input2" />

来源

2016-02-12 15:33:02

function myFunction() { 
 
    var a = document.getElementById('input1'); 
 
    var b = document.getElementById('input2'); 
 
    if (a.value.length == 0 && b.value.length == 0) { 
 
    a.disabled = false; 
 
    b.disabled = false; 
 
    } else if (a.value.length == 0) { 
 
    a.disabled = true; 
 
    } else if (b.value.length == 0) { 
 
    b.disabled = true; 
 
    } 
 
}

<input type="text" id="input1" onkeyup="myFunction()" /> 
 
<input type="text" id="input2" onkeyup="myFunction()" />

来源

2016-02-12 15:38:22

使用JavaScript的HTML表单

回答

相关问题