52,797
社区成员
发帖
与我相关
我的任务
分享keycode方向键求助left和right
我现在想实现在html的文本输入框中，按下left方向键跳入前一个输入框，但是如果开始的输入框中有字符时，不屏蔽方向键的原始功能，就是按下left方向键时，先一个个的过完字符后，再跳入上一个输入框
...全文
请发表友善的回复…
发表回复
filec75 2008-12-09
- 打赏
- 举报
up
cyqlightrain 2008-12-09
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function focusnext(currid){
var objs = document.getElementsByName("tinput");
var len = objs.length;
for(i = 0;i < len;i++){
if(objs[i].id == currid && i < (len - 1)){
objs[i+1].select();
break;
}
}
}
function focuspreview(currid){
var objs = document.getElementsByName("tinput");
var len = objs.length;
for(i = 0;i < len;i++){
if(objs[i].id == currid && i != 0){
objs[i-1].select();
break;
}
}
}
function checkkeycode(evt,thisid){
var evt = evt ? evt : event;
//alert(evt.keyCode);
var keycode = evt.keyCode;
if(keycode == 37){
//left;
focuspreview(thisid);
}else if(keycode == 39){
//right;
focusnext(thisid);
}
}
</script>
</HEAD>
<BODY>
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input1" name="tinput" />
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input2" name="tinput" />
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input3" name="tinput" />
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input4" name="tinput" />
</BODY>
</HTML>
toury 2008-12-09
- 打赏
- 举报
<html>
<head>
<script type="text/javascript">
function movefocus(e,o){
var e= e? e: event;
if(e.keyCode==39||e.keyCode==37){
var len=document.getElementsByName("tinput").length;
var num=o.id.match(/\d+/g);
var cursorpos=GetCursorPos(o);//得到光标位置
if (cursorpos==0){
if(e.keyCode==39){if (num<len){document.getElementById("input"+(num*1+1)).focus();}}
else if(e.keyCode==37){if (num>1) {document.getElementById("input"+(num-1)).focus();}}
}
}
}
function GetCursorPos(o) {
var control = document.activeElement;
o.focus();
var rang = document.selection.createRange();
rang.setEndPoint("StartToStart",o.createTextRange())
//alert(rang.text.length)
return rang.text.length;
}
</script>
</head>
<BODY>
<input type="text" onkeyup="movefocus(event,this);" id="input1" name="tinput" />
<input type="text" onkeyup="movefocus(event,this);" id="input2" name="tinput" />
<input type="text" onkeyup="movefocus(event,this);" id="input3" name="tinput" />
<input type="text" onkeyup="movefocus(event,this);" id="input4" name="tinput" />
</BODY>
</HTML>
IE7测试
zjsfdxbao 2008-12-09
- 打赏
- 举报
呵呵,我借cyqlightrain的代码修改下,应该符合你的要求,你试下看看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function focusnext(currid){
var obj = document.getElementById(currid);
if(returnPos(obj)<obj.value.length)return;
var objs = document.getElementsByName("tinput");
var len = objs.length;
for(i = 0;i < len;i++){
if(objs[i].id == currid && i < (len - 1)){
var txt =objs[i+1].createTextRange();
txt.moveStart('character',0);
txt.collapse(true);
txt.select();
break;
}
}
}
function focuspreview(currid){
var obj = document.getElementById(currid);
if(returnPos(obj)>0)return;
var objs = document.getElementsByName("tinput");
var len = objs.length;
for(i = 0;i < len;i++){
if(objs[i].id == currid && i != 0){
var txt =objs[i-1].createTextRange();
txt.moveStart('character',objs[i-1].value.length);
txt.collapse(true);
txt.select();
break;
}
}
}
function checkkeycode(evt,thisid){
var evt = evt ? evt : event;
//alert(evt.keyCode);
var keycode = evt.keyCode;
if(keycode == 37){
//left;
focuspreview(thisid);
}else if(keycode == 39){
//right;
focusnext(thisid);
}
}
function returnPos(obj)//这个是用来获取文本框中的光标位置的
{
obj.focus();
var s=document.selection.createRange();
s.setEndPoint("StartToStart",obj.createTextRange())
return s.text.length;
}
</script>
</HEAD>
<BODY>
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input1" name="tinput" />
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input2" name="tinput" />
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input3" name="tinput" />
<input type="text" onkeyup="checkkeycode(event,this.id);" id="input4" name="tinput" />
</BODY>
</HTML>
maco1008 2008-12-09
- 打赏
- 举报
二楼你的那个我测试过了，实现的只是全部选中啊，我要的是一个字符一个字符的过，比如，字符acdef,按了方向键left,第一次按到f,第二次按到e,一次类推，到了a后，再按left方向键时跳入上一个输入框。谢谢
