请教，输入内容或回车后，焦点自动跳到下一个输入框， 跳到select时 ，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个select，应该怎样实现？求思路，谢谢
0
[已解决问题]
解决于 2017-04-24 16:49
//$(document).ready(function(){
//keycode 37 = Left, keycode 38 = Up, keycode 39 = Right, keycode 40 = Down
//默认焦点在第一个；当input输入内容大于10或者回车，焦点跳到下一个；按左键返回上一个；
//$('input').eq(0).focus();
//
//$("[name^='demo_']").each(function(){
// $(this).keyup(function(e){
// //debugger;
// e = window.event || e;
// var k = e.keyCode || e.which;
// if(k == 13 || $(this).val().length >= 10 ){ //回车 or >10
// $(this).next().focus();
// }else if(k == 37){ //left
// $(this).prev().focus();
// $(this).prev().focus(function(){
// var obj = e.srcElement ? e.srcElement : e.target;
// });
// }
// })
//});
//});
1 $(document).ready(function () { 2 $('input').eq(0).focus(); 3 $("[name^='demo_']").keydown(function (e) { 4 var k = e.keyCode 5 if (k == 13 || $(this).val().length >= 10) { 6 $(this).next().focus(); 7 return false; 8 } else if (k == 37) { 9 $(this).prev().focus(); 10 $(this).prev().focus(function () { 11 var obj = e.srcElement ? e.srcElement : e.target; 12 }); 13 } 14 }) 15 });
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/demo.css"/> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/demo.js"></script> <title>demo</title> </head> <body> <div class="wrapper"> <div class="container"> <form action="#" id="form" class="form"> <div class="form_inner"> <!--<label for="demo_1">用户名：</label>--> <input type="text" class="demo_input" id="demo_1" name="demo_1" placeholder="请输入..."/> <!--<label for="demo_2">1111：</label>--> <input type="text" class="demo_input" id="demo_2" name="demo_2" placeholder="请输入..."/> <input type="text" class="demo_input" name="demo_3" placeholder="请输入..."/> <textarea class="demo_textarea" name="demo_6" placeholder="请输入..."></textarea> <textarea class="demo_textarea" name="demo_7" placeholder="请输入..."></textarea> <select class="demo_select" name="demo_4" > <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> <select class="demo_select" name="demo_5" > <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> </div> </form> </div> </div> </body> </html>
输入内容或回车后，焦点自动跳到下一个输入框，
跳到select时 ，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个select，应该怎样实现？求思路，谢谢
最佳答案
-1
$(document).ready(function () { //keycode 37 = Left, keycode 38 = Up, keycode 39 = Right, keycode 40 = Down //默认焦点在第一个；当input输入内容大于10、right、回车，焦点跳到下一个；按左键返回上一个； $('input').eq(0).focus(); $("[name^='demo_']").keydown(function (e){ var k = e.keyCode; if (k == 13 || k == 39 || $(this).val().length >= 10) { //回车 / right / >10 if($('#demo_4') || $('#demo_5')){ $(this).parent().next().find("[name^='demo_']").focus(); }else{ $(this).parent().next().find("[name^='demo_']").focus(); //return false; } } else if (k == 37) { //left $(this).parent().prev().find("[name^='demo_']").focus(); $(this).parent().prev().find("[name^='demo_']").focus(function (){ var obj = e.srcElement ? e.srcElement : e.target; }); if($('#demo_4') || $('#demo_5')){ //if(k==13) // return false; //$(this).parent().prev().find("[name^='demo_']").focus(); } } }); });
其他回答(1)
0
运行你的代码，没问题啊，回车键可以使焦点跳到下一个input。
不过我的用jQuery是jquery-3.2.1.min.js
input可以 textarea也可以 是两个select 只能到第一个
@mx夕酉: 原来我看错了，用这个吧onkeypress="return false;"，如下
<select class="demo_select" name="demo_4" onkeypress="return false;" >
主要是回车事件被下拉框获取了，拦截这个事件就好了
@编程点滴: 请问 我想让他跳到select时 option选项自动跳出来，可以上下选择，选择完成后再跳到下一个，实现思路是啥呢
@mx夕酉: 这个就不清楚了
@编程点滴: 谢谢
