onkeydown 解决按回车键直接提交方案

最新推荐文章于 2023-05-17 18:17:09 发布
最新推荐文章于 2023-05-17 18:17:09 发布
阅读量403 收藏
点赞数
文章标签： javascript ViewUI

登陆页面需要扑捉用户按下回车自动提交的需求:

在body里添加onkeydown事件 跳javascript 在提交表单。

查找文档如下

onkeydown 事件会在用户按下一个键盘按键时发生。

语法：οnkeydοwn="SomeJavaScriptCode"

支持该事件的html标签;

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

支持该事件的javascript对象：

document, image, link, textarea

浏览器差异：

Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。

实例：在本例中，用户无法在输入框中键入数字 
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }

keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>

<form>
<input type="text" οnkeydοwn="return noNumbers(event)" />
</form>

</html>


iteye_14608
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
onkeydown事件解决按回车键直接提交数据的需求
09-05
登陆页面需要扑捉用户按下回车自动提交的需求，于是相到在body里添加onkeydown事件跳javascript在提交表单，具体看下实现代码，希望对你有所帮助
在react里实现点击回车键执行事件
热门推荐
xiamocsdn的博客
08-09 1万+
在网页应用里，我们搜索、提交账户名密码等等操作的过程中，不太经常会去一个个用鼠标点击提交或者执行某个按钮类型的操作。对于我个人而言，直接用回车键就很顺手了，鼠标还要去定位，很麻烦。 这几天在搭建一个前后端交互应用app的，最后完善项目一些细节的时候想要加上这个小小的便捷操作功能。 项目是用react+antd-mobile搭建的。如果是用JavaScript代码实现的话，直接在body标签里绑定o...
阻止回车提交表单
AloneAsFoam的博客
09-07 713
1.这段代码在input获取焦点的时候,敲回车键会出发改form表单的提交； 2. 在有些时候这个需求是是不合理的，比如（登录时要判断用户是否存在/这是另外一个接口,和form表单不是同一个接口/然后再进行form提交）； 解决方法一： 这个时候，当表单获取焦点，敲回车并不会使表单提交； 解决方法二：（阻止事件的默认行
HTML阻止textarea标签回车换行
火星基地
06-01 1471
在textarea标签的onkeydown事件中，阻止回车的默认行为即可。 <textarea onkeydown="if (event.keyCode === 13) event.preventDefault();" />
React怎么绑定键盘事件
hahahhahahahha123456的博客
11-11 1531
方法1，直接绑定在原生事件上，这个一般是用来捕捉编辑的时候的事件，用的不多 <textarea onKeyDown={e=> console.log( e.keyCode ) } /> 方法2，通过声明周期直接绑定到document的事件上，这个方式一般用来做快捷键比较多 export class KeyBind extends React.Component { ...
React前端框架路由跳转，前端回车事件、禁止空格、提交方式等方法
weixin_30456039的博客
11-13 781
react router - historyhistory.push() 方法用于在JS中实现页面跳转history.go(-1) 用来实现页面的前进（1）和后退(-1) 访问js连接后+?v1清缓存标签中的Class=“a b c”a b c分别代表3个样式名称！分别用空格隔开！ Struts2》ajax请求后台，后台转换json返回ajax JSONArray js=JSONArra...
Android onKeyDown监听返回键无效的解决办法
08-30
主要介绍了 Android onKeyDown监听返回键无效的解决办法的相关资料,需要的朋友可以参考下
按钮与回车键关联的js代码
01-19
复制代码代码如下: <... <...body onkeydown=’onEnterDown();’> <input id=”ButOk” type=”button” accesskey=”” value=”登录” onclick=”onButOk()” /> </body> </htm
html编辑器的回车换行问题解决方案
01-20
，当然按shift+enter可以是直接加，而很多人希望按回车就是换行而不是分段。 一直有人问我这个问题，而我没有写代码测试就认为在onkeydown里面判断event.keyCode==13就可以判断并解决，而后来发现似乎并没有人能用...
html之文本框的onkeydown()响应Enter键——键盘事件
程序羊的博客
10-18 8759
事件目录常见的jQuery事件常见的鼠标、键盘事件 很多时候，我们需要在html的输入框中按下回车键（Enter）做模糊查找，那么就可以使用到 onkeydown 事件了。 示例代码： <html> <body> <input onkeydown="if(event.keyCode==13) {test()}"/> <script> fun...
onKeydown 应用-回车登录
weixin_34358365的博客
09-11 515
onkeydown 事件 onkeydown 事件会在用户按下一个键盘按键时发生。 例子 vue 环境 html &lt;div class="center"&gt; &lt;div class="box"&gt; &lt;i class="icon-name"&gt;&lt;/i&gt; &lt;input type=&
js/JQuery键盘事件和Keycode实现回车提交表单
weixin_45240705的博客
12-17 352
出自此处,符上原文原文链接: https://www.cnblogs.com/zqifa/p/js-jquery-keyboard.html 一.键盘事件 1.keydown()事件 当按钮被按下时，发生 keydown 事件。 2.keypress()事件 keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。 3.keyup事件 keyup 事件会在按键释放时触发...
Form 表单回车自动提交问题
qq_36428598的博客
05-17 143
window.event.keyCode==13 代表的就是回车键Enter，意思就是点击回车。给input绑定onkeydown事件。
通过python 调用OpenAI api_key提交问题解答
perseverance51博客
02-10 8374
通过python 调用OpenAI api_key提交问题解答
ADB控制手机命令
weixin_30732487的博客
05-22 1670
手机端配置tcp方式连接 su setprop service.adb.tcp.port 5555 stop adbd start adbd 首先使用管理员权限，然后打开监听5555端口 电脑端使用adb远程连接 adb connect ip_address 此时手机端弹出认证请求点击确认即可连接成功。 通过ADB控制手机...
实现单击或者回车双重登录动作（页面登录的回车事件onkeydown）
lpch0825的博客
02-23 342
&lt;script type="text/javascript"&gt; //基于jquery的button默认enter事件(回车事件) document.onkeydown = function (e) { var theEvent = window.event || e;//浏览器兼容性 var code = theEvent.keyCode || theEvent.which; ...
onkeydown事件处理回车后提交表单
netjxz的专栏
01-08 1143
 下面的五种方法都可以帮你解决这种问题1.javascript>function document.onkeydown(){   if (event.keyCode == 13)   {          if (event.srcElement == document.getElementById(´´))          document.getElementById(´´).cli
jsp 输入框<input>回车事件 onkeydown 和 onkeypress
11-10 4545
例子：
JS为键盘中的Enter键添加onkeyDown()和onkeyUp()事件
北辰
07-09 3795
<input type="text" id="pageNum" onkeydown="pageNumKeydown(0,event)" onkeyup="pageNumKeyup(this,event)"/> <span id="totalPageSpan0"></span> /** * 给页码输入框添加Enter事件，跳转指定页码...
tree-select实现选择后按回车键实现搜索
最新发布
05-31
您可以使用Ant Design中的TreeSelect组件来实现选择后按回车键实现搜索的功能。首先，您需要设置TreeSelect的`showSearch`属性为`true`，然后在`onKeyDown`事件中监听回车键的按下事件，当按下回车键时，调用TreeSelect的`filterTreeNode`方法来对树节点进行搜索。 以下是一个简单的示例代码： ```jsx import React, { useState } from 'react'; import { TreeSelect } from 'antd'; const { TreeNode } = TreeSelect; const treeData = [ { title: 'Node 1', value: 'node1', children: [ { title: 'Child Node 1', value: 'child1' }, { title: 'Child Node 2', value: 'child2' }, ], }, { title: 'Node 2', value: 'node2', children: [ { title: 'Child Node 3', value: 'child3' }, { title: 'Child Node 4', value: 'child4' }, ], }, ]; const SearchableTreeSelect = () => { const [searchValue, setSearchValue] = useState(''); const handleKeyDown = (e) => { if (e.keyCode === 13) { // 13 is the key code for Enter key e.preventDefault(); e.stopPropagation(); setSearchValue(''); } }; const handleSearch = (value) => { setSearchValue(value); }; const renderTreeNodes = (data) => data.map((item) => { const { title, value, children } = item; const lowerCaseTitle = title.toLowerCase(); const lowerCaseSearchValue = searchValue.toLowerCase(); const index = lowerCaseTitle.indexOf(lowerCaseSearchValue); if (index === -1 && (!children || children.length === 0)) { return null; } let titleNode = title; if (index > -1) { titleNode = ( <> {title.substr(0, index)} <span className="search-highlight">{title.substr(index, searchValue.length)}</span> {title.substr(index + searchValue.length)} </> ); } return ( <TreeNode key={value} title={titleNode} value={value}> {children && renderTreeNodes(children)} </TreeNode> ); }); return ( <TreeSelect showSearch filterTreeNode={false} onSearch={handleSearch} onKeyDown={handleKeyDown} treeDefaultExpandAll style={{ width: '100%' }} > {renderTreeNodes(treeData)} </TreeSelect> ); }; export default SearchableTreeSelect; ``` 在这个示例中，我们使用了`useState` Hook来存储搜索关键字，并在`onKeyDown`事件中监听回车键的按下事件。当用户按下回车键时，我们将搜索关键字重置为空字符串。 在`renderTreeNodes`函数中，我们使用了递归算法来渲染树节点，并根据搜索关键字高亮显示匹配的文本。 最后，我们在TreeSelect组件中设置了`showSearch`属性为`true`，并将`filterTreeNode`属性设置为`false`，这样我们就可以自己处理搜索逻辑。在`onSearch`事件中，我们将搜索关键字存储到`searchValue`状态中，以便在`renderTreeNodes`函数中使用。 希望这可以帮助到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值