input回车，跳转到指定input

时间：2022-11-09 18:53:36
<input name="a" type="text" />
<input name="b" type="text" />
<input name="c" type="text" />
<input name="d" type="text" />

a回车跳转到c,c回车跳转到d

9 个解决方案

#1

获取指定的input 设置焦点 
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

</head>

<body>

<input name="a" type="text" />

<input name="b" type="text" />

<input name="c" type="text" />

<input name="d" type="text" />

<script>

$('input').keydown(function(e){if(e.keyCode!=13)return;var a=$(this).next('input');if(!a.length)a=$('input:first');a.focus();})

</script>

</body>

</html>

#2

dom.focus()

#3

引用 1 楼 slwsss 的回复:
获取指定的input 设置焦点 
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

</head>

<body>

<input name="a" type="text" />

<input name="b" type="text" />

<input name="c" type="text" />

<input name="d" type="text" />

<script>

$('input').keydown(function(e){if(e.keyCode!=13)return;var a=$(this).next('input');if(!a.length)a=$('input:first');a.focus();})

</script>

</body>

</html>

我模仿你写了个 
$('input[name=x]').keydown(function(d){if(d.keyCode!=13)return;var a=$(this).closest('tr').find('input[name=y]');a.focus();})


$('input[name=y]').keydown(function(d){if(d.keyCode!=13)return;var a=$(this).closest('tr').find('input[name=z]');a.focus();})


$('input[name=z]').keydown(function(d){if(d.keyCode!=13)return;var a=$(this).next('tr').find('input[name=x]');a.focus();})


就是当X回车，跳转到Y，
Y回车，跳转到Z，
Z回车，跳转到下一行的X，这样循环

结果是X跳到Y,Y到Z都是正常的，就是Z跳转到下一行的X时，没反应。应该怎么修改。

#4

$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 

#5

引用 4 楼 slwsss 的回复:
$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 


测试的时候，当前行X一回车就到了下一行Y

#6

引用 5 楼 gettingbook 的回复:
Quote: 引用 4 楼 slwsss 的回复:

$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 


测试的时候，当前行X一回车就到了下一行Y


$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;var t=$(this).closest('tr');if(this.name=='z')t=t.next('tr');if(!t.length)t=$(this).closest('table input[name=x]:first').closest('tr');t.find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})

#7

引用 6 楼 slwsss 的回复:
Quote: 引用 5 楼 gettingbook 的回复:

Quote: 引用 4 楼 slwsss 的回复:

$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 


测试的时候，当前行X一回车就到了下一行Y


$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;var t=$(this).closest('tr');if(this.name=='z')t=t.next('tr');if(!t.length)t=$(this).closest('table input[name=x]:first').closest('tr');t.find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})


测试加过很好，希望能在这个基础上再加个CSS样式：

在当前焦点的input,加一个CSS，边框=1，颜色红色；背景颜色#CCCCCC，失去焦点，移除样式。

#8

引用 7 楼 gettingbook 的回复:
在当前焦点的input,加一个CSS，边框=1，颜色红色；背景颜色#CCCCCC，失去焦点，移除样式。

input:focus{border-color:red;border-width: 1px;background:#cccccc;}

#9

引用 8 楼 slwsss 的回复:
Quote: 引用 7 楼 gettingbook 的回复:
在当前焦点的input,加一个CSS，边框=1，颜色红色；背景颜色#CCCCCC，失去焦点，移除样式。

input:focus{border-color:red;border-width: 1px;background:#cccccc;}


原来这样直接加CSS就可以，我以为要写进JS里，谢谢。

#1

获取指定的input 设置焦点 
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

</head>

<body>

<input name="a" type="text" />

<input name="b" type="text" />

<input name="c" type="text" />

<input name="d" type="text" />

<script>

$('input').keydown(function(e){if(e.keyCode!=13)return;var a=$(this).next('input');if(!a.length)a=$('input:first');a.focus();})

</script>

</body>

</html>

#2

dom.focus()

#3

引用 1 楼 slwsss 的回复:
获取指定的input 设置焦点 
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

</head>

<body>

<input name="a" type="text" />

<input name="b" type="text" />

<input name="c" type="text" />

<input name="d" type="text" />

<script>

$('input').keydown(function(e){if(e.keyCode!=13)return;var a=$(this).next('input');if(!a.length)a=$('input:first');a.focus();})

</script>

</body>

</html>

我模仿你写了个 
$('input[name=x]').keydown(function(d){if(d.keyCode!=13)return;var a=$(this).closest('tr').find('input[name=y]');a.focus();})


$('input[name=y]').keydown(function(d){if(d.keyCode!=13)return;var a=$(this).closest('tr').find('input[name=z]');a.focus();})


$('input[name=z]').keydown(function(d){if(d.keyCode!=13)return;var a=$(this).next('tr').find('input[name=x]');a.focus();})


就是当X回车，跳转到Y，
Y回车，跳转到Z，
Z回车，跳转到下一行的X，这样循环

结果是X跳到Y,Y到Z都是正常的，就是Z跳转到下一行的X时，没反应。应该怎么修改。

#4

$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 

#5

引用 4 楼 slwsss 的回复:
$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 


测试的时候，当前行X一回车就到了下一行Y

#6

引用 5 楼 gettingbook 的回复:
Quote: 引用 4 楼 slwsss 的回复:

$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 


测试的时候，当前行X一回车就到了下一行Y


$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;var t=$(this).closest('tr');if(this.name=='z')t=t.next('tr');if(!t.length)t=$(this).closest('table input[name=x]:first').closest('tr');t.find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})

#7

引用 6 楼 slwsss 的回复:
Quote: 引用 5 楼 gettingbook 的回复:

Quote: 引用 4 楼 slwsss 的回复:

$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;$(this).closest('table').find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})
 


测试的时候，当前行X一回车就到了下一行Y


$('input[name=x],input[name=y],input[name=z]').keydown(function(d){if(d.keyCode!=13)return;var t=$(this).closest('tr');if(this.name=='z')t=t.next('tr');if(!t.length)t=$(this).closest('table input[name=x]:first').closest('tr');t.find('input[name='+(thia.name=='x'?'y':this.name=='y'?'z':'x')+']').focus();})


测试加过很好，希望能在这个基础上再加个CSS样式：

在当前焦点的input,加一个CSS，边框=1，颜色红色；背景颜色#CCCCCC，失去焦点，移除样式。

#8

引用 7 楼 gettingbook 的回复:
在当前焦点的input,加一个CSS，边框=1，颜色红色；背景颜色#CCCCCC，失去焦点，移除样式。

input:focus{border-color:red;border-width: 1px;background:#cccccc;}

#9

引用 8 楼 slwsss 的回复:
Quote: 引用 7 楼 gettingbook 的回复:
在当前焦点的input,加一个CSS，边框=1，颜色红色；背景颜色#CCCCCC，失去焦点，移除样式。

input:focus{border-color:red;border-width: 1px;background:#cccccc;}


原来这样直接加CSS就可以，我以为要写进JS里，谢谢。
标签：

相关文章