首页 新闻 搜索 专区 学院

请教,输入内容或回车后,焦点自动跳到下一个输入框, 跳到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,应该怎样实现?求思路,谢谢

mx夕酉的主页 mx夕酉 | 菜鸟二级 | 园豆:222
提问于:2017-04-17 15:54
< >
分享
最佳答案
-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();
            }
        }
    });
});
mx夕酉 | 菜鸟二级 |园豆:222 | 2017-04-24 16:47
其他回答(1)
0

运行你的代码,没问题啊,回车键可以使焦点跳到下一个input。

不过我的用jQuery是jquery-3.2.1.min.js

狼爷 | 园豆:1202 (小虾三级) | 2017-04-17 16:20

input可以 textarea也可以  是两个select 只能到第一个

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-04-17 16:25

@mx夕酉: 原来我看错了,用这个吧onkeypress="return false;",如下

<select class="demo_select" name="demo_4" onkeypress="return false;" >

 

主要是回车事件被下拉框获取了,拦截这个事件就好了

支持(0) 反对(0) 狼爷 | 园豆:1202 (小虾三级) | 2017-04-17 16:32

@编程点滴: 请问  我想让他跳到select时 option选项自动跳出来,可以上下选择,选择完成后再跳到下一个,实现思路是啥呢

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-04-17 16:36

@mx夕酉: 这个就不清楚了

支持(0) 反对(0) 狼爷 | 园豆:1202 (小虾三级) | 2017-04-17 16:45

@编程点滴: 谢谢

支持(0) 反对(0) mx夕酉 | 园豆:222 (菜鸟二级) | 2017-04-17 16:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册