js 焦点问题：页面上有4个输入框，能不能通过js控制页面的焦点始终为这4个输入框中的一个？
页面上有4个输入框，能不能通过js控制页面的焦点始终为这4个输入框中的一个，当点击了其他地方，及焦点出了这4个文本框，就强制focus到第一个文本框上，请问该如何实现？请...
页面上有4个输入框，能不能通过js控制页面的焦点始终为这4个输入框中的一个，当点击了其他地方，及焦点出了这4个文本框，就强制focus到第一个文本框上，请问该如何实现？请给我个思路，或者给出源码看看，谢谢！
后来问了别人，找到了一种解决方式，限制在6个id中，不过只能在IE下使用，火狐测试不通过，唉！
<html>
<head>
<script language=javascript>
//监听点击事件 模拟触摸屏点击 另外从最后一个文本框出去后自动回到第一个文本框
document.onclick = function(){
//获得当前焦点id
var srcId = event.srcElement.id;
//和允许的id进行比对
if(srcId != "syear" && srcId != "smonth" && srcId != "sday" && srcId != "eyear" && srcId != "emonth" && srcId != "eday" )
{
alert("出了6个指定的焦点,点击确定自动回到第一个文本框");
//回到第一个输入框
window.document.getElementById("syear").focus();
}
}
</script>
</head>
<body>
起始日期<input type="text" id="syear" />年<input type="text" id="smonth" />月<input type="text" id="sday" />日<br>
起始日期<input type="text" id="eyear" />年<input type="text" id="emonth" />月<input type="text" id="eday" onblur="window.document.getElementById('syear').focus();"/>日<br>
</body>
</html> 展开
后来问了别人，找到了一种解决方式，限制在6个id中，不过只能在IE下使用，火狐测试不通过，唉！
<html>
<head>
<script language=javascript>
//监听点击事件 模拟触摸屏点击 另外从最后一个文本框出去后自动回到第一个文本框
document.onclick = function(){
//获得当前焦点id
var srcId = event.srcElement.id;
//和允许的id进行比对
if(srcId != "syear" && srcId != "smonth" && srcId != "sday" && srcId != "eyear" && srcId != "emonth" && srcId != "eday" )
{
alert("出了6个指定的焦点,点击确定自动回到第一个文本框");
//回到第一个输入框
window.document.getElementById("syear").focus();
}
}
</script>
</head>
<body>
起始日期<input type="text" id="syear" />年<input type="text" id="smonth" />月<input type="text" id="sday" />日<br>
起始日期<input type="text" id="eyear" />年<input type="text" id="emonth" />月<input type="text" id="eday" onblur="window.document.getElementById('syear').focus();"/>日<br>
</body>
</html> 展开
4个回答
展开全部
有办法的，只是绑定了整个页面后，需要针对输入框，解除冒泡响应，否则页面点击任何地方（包括输入框）页面焦点将永远指向第一个输入框。
代码如下（测试成功）：
<html>
<body>
<input class="int" type="text" />
<input class="int" type="text" />
<input class="int" type="text" />
<input class="int" type="text" />
</body>
<script>
//获取对象
var page = document.documentElement;
var int = document.querySelectorAll('.int');
//初始化获得第一个焦点
int[0].focus();
//规定点击页面任何位置都会将焦点给予第一个输入框
page.onclick = function(){
int[0].focus();
}
//规定点击4个输入框时例外（不会跳转到第一个输入框）
for(var i=0; i<int.length; i++){
int[i].onclick = function(e){
//阻止冒泡[重点！]
var e = window.event || e;
if(document.all){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
}
</script>
</html>
纯手打，望采纳。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给body绑定事件，通过事件冒泡捕捉真正触发事件的元素，如果不是input，就把焦点放到第一个输入框。可以百度事件委托。
你这个火狐不能跑是因为兼容性，event.srcElement不支持，改下
var event = event || window.event;
var srcId = event.srcElement.id || event.target.id;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以，为每个输入框设置不同的id，当焦点不在这四个id中，focus置为第一个id号；看看手册结合下就可以啦
追问
....我就是不知道如何获得焦点所在的id啦！
追答
学点js吧 太晚了 下次贴代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function foc(id){
var obj = getObj(id);
if(obj.id!="id1" && obj.id!="id2" && obj.id!="id3" && obj.id!="id4"){
getObj("id1").focus();
return;
}
}
function getObj(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<input type="text" id="id1" onfocus="foc(this.id)"/><br />
<input type="text" id="id2" onfocus="foc(this.id)"/><br />
<input type="text" id="id3" onfocus="foc(this.id)"/><br />
<input type="text" id="id4" onfocus="foc(this.id)"/><br />
<input type="text" id="id5" onfocus="foc(this.id)"/><br />
<input type="text" id="id6" onfocus="foc(this.id)"/>
</body>
</html>
是这个意思不？
<html>
<head>
<script>
function foc(id){
var obj = getObj(id);
if(obj.id!="id1" && obj.id!="id2" && obj.id!="id3" && obj.id!="id4"){
getObj("id1").focus();
return;
}
}
function getObj(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<input type="text" id="id1" onfocus="foc(this.id)"/><br />
<input type="text" id="id2" onfocus="foc(this.id)"/><br />
<input type="text" id="id3" onfocus="foc(this.id)"/><br />
<input type="text" id="id4" onfocus="foc(this.id)"/><br />
<input type="text" id="id5" onfocus="foc(this.id)"/><br />
<input type="text" id="id6" onfocus="foc(this.id)"/>
</body>
</html>
是这个意思不？
追问
首先谢谢，谢了这么大段代码，基本能实现了，不过有个问题，如果鼠标不点5和6，点空白处，你这个就不灵了啊。
我问了人，已经解决了，不过你写了这么多代码，分给你了！
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
