想做个按键切换焦点的JS 如何弄
日期：2014-05-16 浏览次数：20316 次
想做个按键切换焦点的JS 怎么弄？
三个输入框：
姓名<input type='text' name='txt1'><br />
手机<input type='text' name='txt2'><br />
昵称<input type='text' name='txt3'><br />
<button id='btn1'>下一个</button>
按钮描述：没有input获得焦点时，点击按钮第一个input获得焦点，有input获得焦点时，点击按钮下一个input获得焦点。
这个要怎么弄呢？当有INPUT获得焦点 当前INPUT的下一个元素呢？当按钮onclick被触发时，此时的focus是#documnet了，而不是input了？是不是？
要怎么做呢？
------解决方案--------------------
三个输入框：
姓名<input type='text' name='txt1'><br />
手机<input type='text' name='txt2'><br />
昵称<input type='text' name='txt3'><br />
<button id='btn1'>下一个</button>
按钮描述：没有input获得焦点时，点击按钮第一个input获得焦点，有input获得焦点时，点击按钮下一个input获得焦点。
这个要怎么弄呢？当有INPUT获得焦点 当前INPUT的下一个元素呢？当按钮onclick被触发时，此时的focus是#documnet了，而不是input了？是不是？
要怎么做呢？
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
姓名<input type='text' name='txt1'><br />
手机<input type='text' name='txt2'><br />
昵称<input type='text' name='txt3'><br />
<button id='btn1'>下一个</button>
<script>
var $ = function(id){
return document.getElementById(id);
};
var $t = function(tag, cot){
cot = cot || document;
return cot.getElementsByTagName(tag);
};
var objs = $t('input');
var i = 0;
$('btn1').onclick = function(){
objs[i].focus();
i = i > 1 ? 0 : i + 1;
}
</script>
</body>
</html>
------解决方案--------------------
sorry 刚才的tab影响拍板 这次换成空格就好了
<html>
<head>
<script>
function xyz() {
var inputs1 = document.getElementsByTagName("input");
for (var i = 0; i < inputs1.length; i ++) {
if (inputs1[i].inputing == "true") {
inputs1[i].inputing = "false";
inputs1[(i + 1) % inputs1.length].focus();
return;
}
}
if (inputs1[0]) {
inputs1[0].inputing = "false";
inputs1[0].focus();
}
}
function initInputing(inputObject) {
var inputs2 = document.getElementsByTagName("input");
for (var i = 0; i < inputs2.length; i ++) {
if (inputs2[i] == inputObject) {
inputs2[i].inputing = "true";
}
else {
inputs2[i].inputing = "false";
}
}
}
</script>
</head>
<body>
<center>
姓名<input type="text" name="txt1" inputing = "false" onfocus = "initInputing(this)"><br/>
手机<input type="text" name="txt2" inputing = "false" onfocus = "initInputing(this)"><br/>
昵称<input type="text" name="txt3" inputing = "false" onfocus = "initInputing(this)"><br/>
<button id="btn1" onclick = "xyz()">下一个</button>
</center>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
