2016-06-11 79 views
1

我有下面的代码,当文本输入到一个框中时,第二个框会自动变为非活动状态。 如果活动框中的文本被删除(例如,由于用户输入的数据不正确),第二个文本框不会自动变为活动状态,它需要重新启用页面刷新。删除附加文本表单框文本时激活html文本表单框

当“活动”文本bx的内容被删除时,有没有办法让“非活动”文本框激活?

<!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(){ 
 
\t last.disabled = true; 
 
}); 
 
last.addEventListener("blur", function(){ 
 
\t first.disabled = true; 
 
}); 
 
</script> 
 
</body> 
 
</html>

+0

虽然这是很简单的实现我很好奇,为什么* *你这样做;一个人可以有姓氏*或*名字,但不是两个?或者我真的误解了你的用户界面? –

+0

姓名和名字实际上并不是他们的选择,他们将是“每个”和“总计”,它们指的是成本,因为该项目允许用户根据总人数计算出国外活动的费用是否知道每项成本或总成本,以便计算总体个人成本。这个例子更容易使用名称。 – user2327626

回答

1

要做到你的要求,你需要支付的四个条件:

(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>

2

您可以使用input event来实现自己的目标:

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; 
 
    }); 
 
}
First name: <input type="text" name="fname" id="fname"><br> 
 
Last name: <input type="text" name="lname" id="lname"><br>