类似智能购票的demo--进入页面后默认焦点在第一个输入框，输入内容、回车、right时焦点自动跳到下一个，当跳到select时，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个。

要实现的效果：进入页面后默认焦点在第一个输入框，输入内容、回车、right时焦点自动跳到下一个，当跳到select时，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个。

PS：自己模拟的一个简单效果，但仍然存在问题：网上搜了许多，关于select自动弹出的问题，仍然没有解决，现在其实觉得select那里实现的只是一个假象。当跳到第一个select时，option弹出，选择后跳到第二个，但是再返回第一个后，第一个select的option就弹不出来了。。这里该怎么实现呢？？？

希望同学们看到后有什么方法可以留言，可以完成一个完整的，谢谢。

$(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) { //回车 or right or >10
            if($('#demo_4') || $('#demo_5')){
                $(this).next().focus();
            }else{
                $(this).next().focus();
                return false;
            }
        } else if (k == 37) { //left
                $(this).prev().focus();
                $(this).prev().focus(function (){
                    var obj = e.srcElement ? e.srcElement : e.target;
                });
        }
    })
});
<!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" id="demo_7" name="demo_7" placeholder="请输入..."></textarea>
                <select class="demo_select" id="demo_4" name="demo_4">
                <!--<select class="demo_select" id="demo_4" name="demo_4" onkeypress="return false;">-->
                    <option>选项一</option>
                    <option>选项二</option>
                    <option>选项三</option>
                </select>
                <select class="demo_select" id="demo_5" name="demo_5">
                    <option>选项一</option>
                    <option>选项二</option>
                    <option>选项三</option>
                </select>
            </div>
        </form>
        <br/><br/><br/>
        <p>默认焦点在第一个；当input输入内容大于10、right、回车，焦点跳到下一个；按left返回上一个；</p>
    </div>
</div>


</body>
</html>

 

posted @ 2017-04-18 10:14  mx夕酉  阅读(438)  评论(0)    收藏  举报