JS - input输入框点击回车提交或者进行别的操作

最新推荐文章于 2023-12-12 08:41:43 发布
最新推荐文章于 2023-12-12 08:41:43 发布
阅读量657 收藏 1
点赞数
原文链接：http://www.cnblogs.com/500m/p/11434103.html
版权
$("input").keydown(function(event){
if (event.keyCode == 13) {
        /* 提交或者别的操作 */
}
});

转载于:https://www.cnblogs.com/500m/p/11434103.html

清，纯一色
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何防止INPUT按回车自动提交表单FORM
09-01
默认情况下，当用户在表单内的输入框（INPUT）中按下回车键时，浏览器会自动提交表单，这有时并不符合开发者的设计需求。本文将详细介绍两种防止INPUT按回车自动提交表单FORM的方法。 ### 方法一：增加一个隐藏的...
表单中的输入框回车就自动提交
weixin_46352558的博客
05-15 474
代码如上 ， 因为我比较喜欢写form表单包住输入框所以就会遇到这种问题，原因大致是因为form的表单属性导致的 加上一个 @submit.native.prevent 就可以解决了。
HTML+JS 实现 input 框回车事件
热门推荐
m0_55080712的博客
09-09 1万+
很多时候input框我们输入结束后都习惯直接按回车，而不是点击button。在form表单中可以实现点击回车即可提交表单，但如果只是一个单独的input框，则无法通过直接按回车来提交内容。这种情况我们可以使用JavaScript脚本实现input框回车事件，其实现方法很简单，这里用到了jQuery框架，代码如下：只需要在script标签中直接加入以下内容即可。keycode==13即代表按下了回车键，同理可以通过更改此代码实现其他按键的触发事件。
使用JavaScript控制文本输入框在按下回车时进行数据提交！
面向对象
10-14 615
假设有一个文本输入框，也可以是一个表单： 如： <input id="searchProductText" name="textfield" type="text" class="font-hui14" value="请在此输入商品名" size="28" onkeypress="if(event.keyCode==13
前端学习笔记：JavaScript类和对象
ycsss的博客
11-24 663
黑马Pink老师的javaScript进阶面向对象ES6教程： https://www.bilibili.com/video/BV1Kt411w7MP?p=1 本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。 目录1. 面向对象编程1.1 两大编程思想1.2 面向过程编程 POP(Process oriented programming)1.3 面向对象编程 OOP(Object Oriented Programming)
前端js优化表单中单个输入框的回车提交事件
最新发布
m0_73117087的博客
12-12 597
通过以上优化方法，我们可以避免在只有一个输入框的表单中，回车键触发表单提交事件的问题。
input多标签插件 按回车生成新的标签
08-08
当用户在`input`框中输入内容并按下回车键时，我们可以通过JavaScript来捕获这个事件，并对输入的内容进行处理。处理过程包括检查输入内容是否为空，如果非空，则将其添加到已有的标签列表中。通常会使用一个数组来...
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
01-08
-- 解决form表单在只有一个input输入框时回车会自动提交表单 --> <input type='text' style='display:none'/> ``` 此外，还可以通过JavaScript绑定事件来避免这种情况。例如，可以监听键盘按键事件，当用户按下...
input输入框的自动匹配(原生代码)
09-05
【输入框自动匹配原生实现】的原理与步骤 在前端开发中，输入框自动匹配功能常见于搜索框，能够根据用户输入的内容实时展示匹配的选项。本问题要求使用原生JavaScript来实现这一功能，不依赖任何框架。下面将详细...
JavaScript表单提交总结
weixin_44886806的博客
04-29 391
1.input标签提交 1.1>input[type=submit input的type属性是submit，会引发表单提交。 作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>‘提交‘; 1.2>input[type=button] input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交 2....
js 回车提交表单两种实现方法
10-27
js 回车提交一些新手朋友还是比较陌生的，本文介绍两种实现方法:jQuery方法、JavaScript方法,感兴趣的朋友可以研究下
（js）按下enter键执行函数
09-03
（js）按下enter键执行函数
js回车提交事件
zzqkillyou的专栏
04-26 1080
常常需要捕捉 用户的输入后用回车 提交的事件，而不是用鼠标单击一般有两种情况一、整个页面用一个回车提交事件：    document.onkeydown = function(e){        if(!e) e = window.event;//火狐中是 window.event        if((e.keyCode || e.which) == 1
JS 回车提交
07-15 103
1、JavaScript 方法： <script> document.onkeydown=function(event){ e = event ? event :(window.event ? window.event : null); if(e.keyCode==13){ //执行的...
js表单提交enter触发提交
总结前端开发中遇到的问题，分享前端知识
06-23 487
<div> <label for="username">用户名：</label><input type="text" id="username" value="123"> </div> <div> <label for="password">密 码：</label><input type="password" id="password" value="123"></div&g.
阻止 form input 输入框按回车自动提交表单
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
01-21 1132
发现问题： 写东西时发现form 表单 中的 input 在 按下回车键（enter）时自动提交表单，而且在地址栏中显示提交的内容，这个东西就很鸡肋，我如果填的是密码，就会感觉这东西很不正规，那咱就找解决方法吧！ 解决过程 在搜索时发现原来在 form 表单中只有一个 input 输入框时按回车键浏览器默认会触发表单提交，默认这两个字对 js 来说首先想到的就是 阻止浏览器默认行为，在此奉上一份vue 阻止事件冒泡，捕获方法文章，方便查阅 解决方法 找到问题的原因，那解决就很简单了，阻止浏览器默认行为不就得
form表单回车提交问题,JS监听回车事件
weixin_46272061的博客
05-29 1133
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则： 1. 如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。 ...
js 模拟回车 模拟键盘，给input框输入值 触发回车事件
weixin_42649856的博客
01-06 7068
js模拟 模拟输入 模拟键盘 模拟回车 模拟Enter
js el-input输入框需要支持多输入 完整代码
05-31
好的，以下是一个支持多输入的 el-input 输入框的完整代码（使用了 Vue.js 和 Element UI）： ```html <template> <div> <el-input :value="inputValue" @input="handleInput" @keyup.enter="handleEnter" placeholder="请输入内容" ></el-input> <ul> <li v-for="(item, index) in inputList" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { inputValue: "", // 输入框的值 inputList: [] // 多输入的内容列表 }; }, methods: { handleInput(value) { // 监听输入框的输入事件 const lastChar = value[value.length - 1]; // 获取最后一个字符 if (lastChar === "," || lastChar === "，") { // 如果是逗号或者中文逗号 const str = value.slice(0, -1); // 去除逗号 this.inputList.push(str); // 将输入框的值加入到列表中 this.inputValue = ""; // 清空输入框的值 } }, handleEnter() { // 监听回车事件 this.inputList.push(this.inputValue); // 将输入框的值加入到列表中 this.inputValue = ""; // 清空输入框的值 } } }; </script> ``` 这个组件中，使用了 `inputValue` 和 `inputList` 两个 data 属性，分别表示输入框的值和多输入的内容列表。在 `handleInput` 方法中，监听输入框的输入事件，如果输入的最后一个字符是逗号或者中文逗号，则将输入框的值加入到列表中，并清空输入框的值；在 `handleEnter` 方法中，监听回车事件，将输入框的值加入到列表中，并清空输入框的值。最后，在模板中通过 v-for 渲染多输入的内容列表。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值