Question

我在HTML表单中有两个字段：

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

有没有办法使用JavaScript，如果用户用户在第一个测试框中输入了文本，第二个文本框被禁用，反之亦然？

Answer 1

您可以通过禁用未使用keyup()事件和not()方法输入的输入来使用jQuery。这看起来像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

Answer 2

jQuery方式：

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

Locale.availableLocales()

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

for (Locale locale : Locale.getAvailableLocales()) {
  try {
    Currency c = Currency.getInstance(locale);
    System.out.println(c + "\t" + locale);
  } catch (IllegalArgumentException ignore) { }
}

和

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

这样就可以了。当用户更改输入值时，它会将“禁用”类添加到另一个输入。

Answer 3

这是一个清晰的JavaScript的答案。使用disabled属性的优点是，即使使用制表，也无法将输入放入其他字段。

在代码段中，如果两个输入字段都为空，则也会重置禁用。

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" />

Answer 4

这是一个非常简单的例子（下面的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/

Answer 5

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

使用JavaScript禁用HTML表单中的字段

5 个答案: