JS实现表单输入Enter键转换焦点框
<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>
</form>
<script type="text/javascript">
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>
jQuery版 相比存在一点缺陷 要求不严格的话可以用
$(function () {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
分析:
$('input:text:first').focus();
页面初始化时,焦点定位第一个文本框内
var $inp = $('input:text');
取的type=文本框的元素集合
$inp.bind('keydown', function (e) {}
给文本框集合绑定'keydown'事件
var key = e.which;
取的当前按下的键值 比如Enter的键值=13
e.preventDefault();
JS实现表单输入Enter键转换焦点框的更多相关文章
- form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- Vue.js:表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- JS 更改表单的提交时间和Input file的样式
JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...
随机推荐
- datagrid合并行列--并不能影响序号列内容...(formatter的锅.)
datagrid合并行列 //datagrid组件. $('#id_dailylist_dg').datagrid({ //url:'datagrid_data.json', columns:[[ { ...
- 国庆第七日(2014年10月7日17:55:56),随手记,一些关注的OSC软件,花生壳
(1)最难过的是今天. (2)随手记:001.002. (3)htmlunit.joda-time.date4j.jdao.BeanGenerator.JavaScript秘密花园(开源图书) OS ...
- mysql 5.7.16多源复制
演示一下在MySQL下搭建多主一从的过程. 实验环境: 192.168.24.129:3306 192.168.24.129:3307 192.168.24.129:3308 主库操作 导出数据 分别 ...
- awk 查找文件长度 删除
#在某个目录下,由于有些是缓存文件,它们的共同点就是长度大于3, 找到它们,然后用rm 命令删除#ls abc.pyabcd.py.... #ls | awk 'length($1) > 3 { ...
- 查找PHP的配置文件
查找PHP的配置文件 先写了一个 <?php phpinfo();?>然后在浏览器中浏览一下(之前我百度说在Configuration File 这个位置看) 结果竟然显示 Loaded ...
- yii2源码学习笔记(十八)
View继承了component,用于渲染视图文件:yii2\base\View.php <?php /** * @link http://www.yiiframework.com/ * @co ...
- crontab与环境变量
一个shell脚本,直接执行能成功,但是加在crontab后确怎么也执行不成功. 问题的原因是:crontab的环境变量与直接执行用户的环境变量不一样. export PATH=$PATH:/sbin ...
- SQLServer数据库 导出表和导入sql脚本
1.选择需要导出表的数据库--任务---生成脚本 2.显示:生成和发布脚本窗口--简介(某些可能关闭该页面的,可以省略该步骤),点击下一步 3.显示:生成和发布脚本窗口--选择对象--按照图片操作即可 ...
- aspx页面中, <%= % > 与 <%# % > 的区别
关于这个问题,在多数的 ASP.NET 的教材中,都提到了一些. <%= % >与 <%# % >的区别在于:绑定时机不同, <%# % >是在控件调用DataBi ...
- 关于mac上的homebrew
首先它的安装指令并不难: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...