首页 web前端 js教程 Enter回车切换输入焦点实现思路与代码兼容各大浏览器_jquery

Enter回车切换输入焦点实现思路与代码兼容各大浏览器_jquery

May 16, 2016 pm 04:37 PM
enter 回车

做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息。

第一想法就是,网上去copy一段代码直接用。但了百度、谷歌找了个遍,找到的代码80%以上都是一样的。有的代码太老,都不能用。有的只有部分浏览器能用。折腾了半小时也没个合适的办法。最后一想,干脆自己动手。

一、思路

每次点击回车的时候,获取当前的焦点位置,然后设置它的下一个元素获取焦点;

二、代码

<script type="text/javascript">
$('input:text:first').focus(); 
document.onkeydown = function enterHandler(event)
{
var inputs = $("input"); //可自行添加其它过滤条件 
var browser = navigator.appName ; //浏览器名称
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 

var Code = '' ;
if(browser.indexOf('Internet')>-1) // IE 
Code = window.event.keyCode ;
else if(userAgent.indexOf("Firefox")>-1) // 火狐
Code = event.which;
else // 其它
Code = event.keyCode &#63; event.keyCode : event.which &#63; event.which : event.charCode;

if (Code == 13) //可以自行加其它过滤条件
{
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].id == document.activeElement.id)
{ 
i = i== (inputs.length - 1) &#63; -1 : i ;
$('#'+ inputs[i+1].id ).focus()
break;
}
}
}
}
</script>
登录后复制

其中,因为IE和火狐对键值获取的不同,所以对浏览器做了简单的判断区分。这样就可以在各个浏览器上获取敲击的键值。

最后,获取到当前的值以后,就可以加其它的各种条件了。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Windows 11 无法更新系统保留分区:3 个提示 Windows 11 无法更新系统保留分区:3 个提示 Apr 26, 2023 pm 03:13 PM

在更新Windows11或从Windows10升级到Windows11时,您可能会遇到错误Wecouldnotupdatesystemreservedpartition。这可能伴随着错误代码0xc1900104、0x800f0922或0xc1900201。是什么导致系统保留分区错误?这可能是由无法再写入的完整系统保留分区(SRP)引起的。此外,一些第三方安全和防病毒应用程序写入SRP并可以快速填满它。使用Linux进行双重引导也可能是该错误的原因。此外,如果您

Windows 11 可选功能空:该怎么办? Windows 11 可选功能空:该怎么办? Apr 15, 2023 pm 02:49 PM

最好的Windows11可选功能可让您充分利用PC的巨大潜力。您可以激活生产力功能并获得更多功能。因此,在需要时突然看到这些设置空白可能会很烦人。某些功能变为空白,从错误的系统设置到丢失和损坏的文件。无论原因如何,我们都收集了七个简单而有效的修复程序,以帮助您恢复Windows11可选功能。为什么Windows功能框为空?Windows11可选功能框为空的原因有很多。以下是一些流行的:设置错误。包含有关Windows功能信息的组件存储损坏。损坏的系统文件。如何在Windows

Windows 11: 如何启用和使用 Windows 移动中心? Windows 11: 如何启用和使用 Windows 移动中心? Apr 25, 2023 pm 06:58 PM

不幸的是,更改Windows设备的基本设置(例如亮度和音量)可能有点麻烦。为了达到这些平凡的设置,用户必须在几个菜单中导航,这是相当不直观的。值得庆幸的是,Windows提供了一个工具,允许用户通过点击手指来访问和更改这些平凡的设置。问题是很少有人知道它的存在。而那些这样做的人可能不知道如何启用它。什么是Windows移动中心?Windows移动中心或WMC首次在WindowsVista中引入,它是一个内置的Windows组件,它集中了与便携式和移动设备最相关的信息和设置。其中一些

enter在键盘哪个位置 enter在键盘哪个位置 Mar 24, 2023 pm 01:46 PM

enter在主键盘区的右边,Shift键的上面;enter键是回车键,又称确认键、输入键;在电脑键盘上有一个写有Enter或return字样的按键,就被叫做“回车键”,其中Enter是Windows系统的叫法,而macOS中叫做return。

如何使用 PowerShell 手动安装 Windows 10/11 更新 如何使用 PowerShell 手动安装 Windows 10/11 更新 Apr 23, 2023 pm 05:13 PM

当发布任何补丁或引入任何功能时,经常更新系统非常重要。如果我们不这样做,那么我们就会错过关键的错误修复、弱安全性、软件不兼容等等。系统可能只是表现得很奇怪,或者程序只是崩溃了。通常,我们通过浏览设置和更新和安全来更新系统,然后检查是否有可用的更新。如果您无法访问设置或访问更新和安全选项,还可以如何进行更新?我们可能很少有人有这个问题,但解决方案很简单,也可以使用PowerShell命令完成。在本文中,让我们学习如何使用PowerShell命令手动更新Windows10系统。使用PowerS

enter是哪个键 enter是哪个键 Feb 22, 2023 pm 02:56 PM

enter是回车键;在电脑键盘上有一个写有Enter或return字样的按键,被叫做“回车键”,其中Enter是Windows系统的叫法,而macOS中叫做return,而有的Windows电脑的enter按键会有一弯箭头;回车键有两个作用,分别是:1、确认输入的执行命令;2、在文字处理中起换行的作用。

java怎么读取回车 java怎么读取回车 Mar 22, 2024 pm 04:57 PM

在 Java 中,回车通常由换行符表示。Windows 系统中使用 "\r\n" 表示回车换行,而 Unix/Linux 系统中则使用 "\n"。读取包含回车的文本时,Java将这些字符视为普通字符。可以使用 BufferedReader 或 Scanner 类从输入流中读取文本,直到遇到回车换行符。

Vue中如何使用事件修饰符.v-on:keyup.enter实现按下回车键的事件处理 Vue中如何使用事件修饰符.v-on:keyup.enter实现按下回车键的事件处理 Jun 10, 2023 pm 11:43 PM

Vue是一种非常强大的JavaScript框架,它可以轻松地帮助我们构建交互性强的Web应用程序。Vue提供了一些非常方便的功能,其中包括事件修饰符。事件修饰符是一种能够简化DOM事件绑定的方式,为我们提供了快速处理特定事件的方法。在Vue中,我们可以通过使用v-on指令来绑定事件。v-on指令可以使我们监听特定的事件并触发事件处理函数。对于常用的DOM事

See all articles