js 焦点问题：页面上有4个输入框，能不能通过js控制页面的焦点始终为这4个输入框中的一个？

页面上有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>

举报该问题

推荐答案 2017-11-10

有办法的，只是绑定了整个页面后，需要针对输入框，解除冒泡响应，否则页面点击任何地方（包括输入框）页面焦点将永远指向第一个输入框。

代码如下（测试成功）：

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

纯手打，望采纳。

温馨提示：答案为网友推荐，仅供参考

当前网址：http://11.wendadaohang.com/zd/82S4FFSPF.html

其他回答

第1个回答 2017-11-09

给body绑定事件，通过事件冒泡捕捉真正触发事件的元素，如果不是input，就把焦点放到第一个输入框。可以百度事件委托。

你这个火狐不能跑是因为兼容性，event.srcElement不支持，改下

var event = event || window.event;
var srcId = event.srcElement.id || event.target.id;

第2个回答 2011-12-14

可以，为每个输入框设置不同的id，当焦点不在这四个id中，focus置为第一个id号；看看手册结合下就可以啦追问

....我就是不知道如何获得焦点所在的id啦！

追答

学点js吧太晚了下次贴代码

第3个回答 2011-12-15

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

是这个意思不？追问

首先谢谢，谢了这么大段代码，基本能实现了，不过有个问题，如果鼠标不点5和6，点空白处，你这个就不灵了啊。
我问了人，已经解决了，不过你写了这么多代码，分给你了！

本回答被提问者采纳

相似回答

有4个input标签value值分别不同,用JS实现当文本框失去焦点是没有输入...答：this.value)this.value='default4'"/>绑定onblur处理函数就好了

大家正在搜

jsp页面输入框只能输入数字 js在页面中增加输入框 js获取输入框并自动输入点击输入框页面放大 html5弹出输入框页面不缩小登录页面输入框有几种交互状态 js的输入框 js获取input输入框的值 js获取输入框的数据