Question

我有以下代码，当在一个框中输入文本时，第二个框自动变为非活动状态。如果活动框中的文本被删除（例如，由于用户输入的数据不正确），则第二个文本框不会自动变为活动状态，它需要再次激活页面刷新。

有没有办法让＆＃34;变得不活跃＆＃34;当＆＃34; active＆＃34;的内容时，文本框处于活动状态文本bx被删除了吗？

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>

<body>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
<script type="text/javascript">
var first = document.getElementById("fname");
var last = document.getElementById("lname");
first.addEventListener("blur", function(){
	 last.disabled = true;
});
last.addEventListener("blur", function(){
	 first.disabled = true;
});
</script>
</body>
</html>

＆＃13;

Answer 1

您可以使用input event来实现目标：

＆＃13;

window.onload = function() {
  var first = document.getElementById("fname");
  var last = document.getElementById("lname");
  first.addEventListener("input", function(e){
    last.disabled = this.value.trim().length != 0;
  });
  last.addEventListener("input", function(e){
    first.disabled = this.value.trim().length != 0;
  });
}

＆＃13;

First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>

＆＃13;

Answer 2

要做你要求的事，你需要涵盖四个条件：

（1）当关注其中一个字段时，禁用其他字段

（2）删除活动字段中的所有数据时，启用其他字段

（3）将新数据添加到活动字段时，禁用其他字段

（4）当模糊活动字段时，重新启用其他字段IF模糊字段为空

这应该涵盖四个。请注意，此示例使用jQuery，因此jQuery库应包含在中（如下面的演示代码中所示）。此外，jQuery代码应位于document ready function内。

$(document).ready(function(){

  $('input').focus(function(){
    $('input').not(this).prop('disabled',true);
  });

  $('input').keyup(function(){
    var txt = $(this).val();
    if (txt.length < 1) $('input').prop('disabled', false);
    else $('input').not(this).prop('disabled',true);
  });

  $('input').blur(function(){
    var txt = $(this).val();
    if (txt.length < 1) $('input').prop('disabled', false);
  });

}); //END document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>

删除其他文本表单框文本时，激活html文本表单框

2 个答案: