要实现的效果：进入页面后默认焦点在第一个输入框，输入内容、回车、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>

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

  1. select初始化添加option,通过标签给出回显值，由于回显值和初始化值option中有一个值重复，去重等问题！

    第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...

  2. 打开网页自动弹出QQ对话框的实现办法

    Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...

  3. AJ学IOS（18）UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复

    AJ分享,必须精品 先看图片 第一步完成tableView和Cell的架子的图 完善图片 键盘弹出设置后图片: 自动回复图: 粗狂的架子 tableView和Cell的创建 首相tableView为了 ...

  4. IE浏览器 下面的文本框，获得焦点后无法输入内容

    今天遇到一个问题,在IE浏览器下面,我点击 按钮  弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...

  5. 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车，内容显示成小方块并带删除按钮。

    模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...

  6. vue4——把输入框的内容添加到页面（简单留言板）

    文章地址:https://www.cnblogs.com/sandraryan/ vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把ar ...

  7. 新手遇到的问题：Easy UI的对话框老是在页面载入完毕后自己主动弹出

    因为是第一次接触Easy UI,还不是非常熟悉,尝试了一下对话框功能,还是非常不错的.但问题是页面载入完毕后.全部的对话框都自己主动弹出来了,百度了好久,也没有详细说明确的,貌似别人都没有这个问题哦 ...

  8. popupwindow中EditText获取焦点后自动弹出软键盘

    关于popupwindow中EditText获取焦点后自动弹出软键盘的问题,玩过手机qq或空间的童鞋应该知道,再点击评论时会弹出一个编辑框,并且伴随软键盘一起弹出是不是很方便啊,下面我们就来讲一下实现 ...

  9. vs安装后当切换到图形设计界面的时候自动弹出“正在准备安装的提升”,然后程序处于假死状态

    Vs2008 安装后当切换到图形设计界面的时候自动弹出 ”正在准备安装的提示“,然后程序处于假死状态 在网上找了很多,最终解决问题:  从vs2008安装光盘中找到 /WCU/WebDesignerC ...

随机推荐

  1. Filebeat issue 排查--single.go:140: ERR Connecting error publishing events (retrying): dial tcp ****:5044: i/o timeout

    我个人用docker搭建了一套日志分析平台:ELK+Filebeat 在正常跑了半个多月之后,Kibana刷新日志时突然发现日志不在更新了,停在某个时刻,就再也没有新log. 首先我查看了elk,lo ...

  2. i++与++i陷阱

    对于++i与i++编程必不可少,它们的区别:一般人只知道++i是先将i加一再进行其他操作,i++是先将i进行其他操作,再将其加一. 但是对于i++其中的执行过程,语言环境很关键.先来两个程序,看结果是 ...

  3. 【js】函数问题

    一.函数重载问题: 由于js的函数传入的参数当做arguments对象(和数组类似,但不是Array的实例),传入的参数类型和数量没有限制,没有函数签名,所以如果要实现重载功能 的话,只能是不够完美得 ...

  4. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  5. 小白该怎么学《马哥Linux从入门到精通》

    首先,必须说明我已经不是小白啦~现在的我在国内某独角兽担任运维工程师,带着一个四人小团队,在运维方面也算是有些心得,勉强过来回答一下这个问题,就算抛砖引玉了. 所有人都是从小白阶段过来的,我=也经历过 ...

  6. 1590: [Usaco2008 Dec]Secret Message 秘密信息

    1590: [Usaco2008 Dec]Secret Message 秘密信息 Time Limit: 5 Sec  Memory Limit: 32 MBSubmit: 209  Solved:  ...

  7. Windows下GIT安装与使用（上传远程端）

    Windows下GIT安装与使用(上传远程服务器) 1.  登陆http://msysgit.github.io/并下载Git 2.  打开下载的exe文件,一路默认(路径可以去修改).有可能电脑需要 ...

  8. 爬取软考试题系列之ip自动代理

    马上5月份有个软件专业等级考试,以下简称软考,为了更好的复习备考,我打算抓取www.rkpass.com网上的软考试题. 以上为背景. 很久没有更新博客园的博客了,所以之前的代码没有及时的贴出来,咱们 ...

  9. SignalR的一点点东西

    JS部分 $.connection.hub.start().done(function () { alert(ok); }).fail(function (error) { alert(error); ...

  10. mysql新建数据库时的collation选择（转）

    转自别处的文章.末尾附原文链接 mysql的collation大致的意思就是字符序.首先字符本来是不分大小的,那么对字符的>, = , < 操作就需要有个字符序的规则.collation做 ...