类似智能购票的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>
类似智能购票的demo--进入页面后默认焦点在第一个输入框，输入内容、回车、right时焦点自动跳到下一个，当跳到select时，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个。的更多相关文章
- select初始化添加option,通过标签给出回显值，由于回显值和初始化值option中有一个值重复，去重等问题！
第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...
- 打开网页自动弹出QQ对话框的实现办法
Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...
- AJ学IOS（18）UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
AJ分享,必须精品 先看图片 第一步完成tableView和Cell的架子的图 完善图片 键盘弹出设置后图片: 自动回复图: 粗狂的架子 tableView和Cell的创建 首相tableView为了 ...
- IE浏览器 下面的文本框，获得焦点后无法输入内容
今天遇到一个问题,在IE浏览器下面,我点击 按钮 弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...
- 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车，内容显示成小方块并带删除按钮。
模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...
- vue4——把输入框的内容添加到页面（简单留言板）
文章地址:https://www.cnblogs.com/sandraryan/ vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把ar ...
- 新手遇到的问题：Easy UI的对话框老是在页面载入完毕后自己主动弹出
因为是第一次接触Easy UI,还不是非常熟悉,尝试了一下对话框功能,还是非常不错的.但问题是页面载入完毕后.全部的对话框都自己主动弹出来了,百度了好久,也没有详细说明确的,貌似别人都没有这个问题哦 ...
- popupwindow中EditText获取焦点后自动弹出软键盘
关于popupwindow中EditText获取焦点后自动弹出软键盘的问题,玩过手机qq或空间的童鞋应该知道,再点击评论时会弹出一个编辑框,并且伴随软键盘一起弹出是不是很方便啊,下面我们就来讲一下实现 ...
- vs安装后当切换到图形设计界面的时候自动弹出“正在准备安装的提升”,然后程序处于假死状态
Vs2008 安装后当切换到图形设计界面的时候自动弹出 ”正在准备安装的提示“,然后程序处于假死状态 在网上找了很多,最终解决问题: 从vs2008安装光盘中找到 /WCU/WebDesignerC ...
随机推荐
- Java Web(十三) 使用javamail进行发送邮件，(使用QQ，163，新浪邮箱服务器)
加油加油. --WH 一.发送邮件的原理 在了解其原理之前,先要知道两个协议,SMTP和POP3 SMTP:Simple Mail Transfer Protocol,即简单邮件传输协议,发送邮件的协 ...
- JavaWeb之DBUtils
一.什么是DBUtils及作用 DBUtils是apache公司写的.DBUtils是java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作.可以 ...
- Memcached·Redis缓存的基本操作
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- Debian安装Oracle Java步骤
在Debian下安装OpenJDK使用apt命令非常方便的安装,但安装Oracle就需要手动了,这里需了解ln和update-alternatvies命令. ln链接 首先我们来说说linux的链接, ...
- js/jQuery中load()、onload()、ready()的区别
一.两大事件 load事件:指页面包含图片等文件在内的所有元素都加载完毕后执行的事件. ready事件:表示文档结构已加载完成(不包括图片等非文字媒体文件) 浏览器页面渲染的过程 - 寸寸君 - 博客 ...
- JavaWeb之Filter过滤器
原本计划这一篇来总结JSP,由于JSP的内容比较多,又想着晚上跑跑步减减肥,所以今天先介绍Filter以及它的使用举例,这样的话还有些时间可以锻炼锻炼.言归正传,过滤器从字面理解她的话有拦网.过滤的功 ...
- WPF 动态生成DataGrid及动态绑定解决方案
一.场景 有过WPF项目经验的朋友可能都知道,如果一个DataGrid要绑定静态的数据是非常的简单的(所谓静态是指绑定的数据源的类型是静态的),如下图所示,想要显示产品数据,只需绑定到一个产品列表即可 ...
- matplotlib根据Y轴数量伸缩画图的py脚本
#coding:utf-8import numpy as npimport matplotlib.pyplot as plt #X,Y轴数据y = [20,59,11,12,16,20,15,12,1 ...
- ubuntu 切换java环境，配置单独的用户环境
执行命令:sudo update-alternatives --config javaThere are 2 choices for the alternative java (providing ...
- WF学习思维导图
原文 来自我的有道笔记-老文重发系列 如果配置加载核心服务,那么需要将持久化服务和跟踪服务放在一个数据库中! 1.用工作流的优点 a.提供将复杂任务分解的途径,通过将每个操作分解到活动中更便于业务 ...