首页 > 其他分享 >js页面当中没有写回车事件,但是有回车效果

js页面当中没有写回车事件,但是有回车效果

时间:2024-03-04 09:23:04浏览次数:347  
标签:text js 事件 input type 回车 页面

前两天遇到一个问题,研究了我很差事件。问题如下:

页面只有一个文本框,没有写任何回车事件,但是点回车的时候,就会触发回车,回传页面。

于是各种google,终于有了结果:

  1. 如果表单里有一个type=”submit”的按钮,回车键生效。
  2. 如果 表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
  3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为 type=submit。
  4. 其他表单元素如textarea、select不影 响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
  5. type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用 CSS添加背景图合适些。

这五点是引用别人的原话,说的很明了。

我的问题就是上方第二点,跟JS没有一丁点关系,但是浏览器默认有一个规则,当你的页面只有一个type="text"的情况下,他会默认当有一个sumbit的事件,如果出现两个type="text"的时候,就不会生效了

所以,一下次,如果你的页面也只有一个“text”(一般是搜索页面),如果也想写回车事件的话,就要注意了。

其实像这种问题,解决办法很变态,我是在页面里面放一个隐藏的“text”。

我是使用的页面隐藏一个type="text"的input标签。

第二种解决方法就是js阻止页面的回车事件

标签:text,js,事件,input,type,回车,页面
From: https://www.cnblogs.com/it1042290135/p/18051164

相关文章

  • xlua - 增加lua-cjson库
    xlua貌似不支持单独动态加载cjson.dll,试了各种方式,都是会造成Unity闪退,也不知道原因。解决办法就是直接编译进xlua.dll 1)下载lua-cjson源码,并解压到xlua的build文件夹根目录GitHub-openresty/lua-cjson:LuaCJSONisafastJSONencoding/parsingmoduleforLua 2......
  • 【python接口自动化系列】python + pytest + requests + allure + jsonpath + pyyaml,
     前置基础:python虚拟环境的创建、操作、迁移等python操作yamlpython操作mysqlpytest简易教程 配套练习环境(含相关接口):https://www.cnblogs.com/uncleyong/p/17165143.html 如果文章不能访问,请联系处理,wx:ren168632201 python接口自动化系列(01):自动化测试框......
  • Nestjs系列 Nestjs基础(二)
    providers使用该内容可以结合Nestjs中文网-自定义提供者查看创建一个nest项目,创建一个Personcrud模块。providers写法providers完整和简写@Injectable()装饰器将PersonService类标记为提供者。然后在Module中声明,即和PersonService做关联,个人感觉provider......
  • JSOI2024 游记
    本文使用CCBY协议发布。Day0(2024.3.1)坐高铁到达南京。路上打了SA-IS,感觉全忘光了。/kk签到时被教练带着转了一圈NFLS。捡到了一张社保卡。还到签到处的时候发现是某位老师的。rp++。试机时紧急搜了将CapsLock映射为Ctrl的方法。setxkbmap-optionctrl:nocapsD......
  • Vue3学习(二十一)- 文档管理页面布局修改
    写在前面按照国际惯例,要先聊下生活,吐槽一番,今天是2月14日,也是下午听老妈说,我才知道!现在真的是对日期节日已经毫无概念可言,只知道星期几。现在已经觉得写博客也好,学习文章也罢,和写日记一样,已经融入到我的生活中,或者更确切的说,变成生活的一部分了。饭后和老妈闲聊了几句后,我发......
  • npm 包 package.json 配置文件
    package.json文件每个前端项目中都有package.json文件,它是用于声明依赖的npm包配置文件。1.生成package.json文件yarninit-y{"name":"package.json文件","version":"1.0.0","main":"index.js","license":......
  • 对于购物中心HTML前端页面的优化
    在对同学上学期的购物中心HTML前端页面项目进行学习后,我对它进行了优化。在原先的基础上,给它的注册、忘记密码按钮增加了跳转接口,使得这两个功能可以实现跳转,并且在商品展示页增加了返回登录页面的接口。原始代码列表:优化后代码列表:代码文件:原始登录页.html:点击查看代码<......
  • 使用 CSS 如何禁用浏览器打印页面 All In One
    使用CSS如何禁用浏览器打印页面AllInOneprint.css禁用PDF导出网页有时,你的网站或应用程序可能希望改善用户在打印内容时的体验。有几种可能的情况:你希望根据纸张的大小和形状调整布局。你希望使用不同的样式来增强纸上内容的外观。你希望使用更高分辨率的图像以......
  • C# 调用Web Api post提交json格式
    转载:https://blog.csdn.net/q_17600689511/article/details/82735172?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-82735172-blog-86551903.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=di......
  • json中的转义字符
    JSON的转义字符主要包括以下几种:双引号("):在JSON中,双引号用于定义字符串的开始和结束。如果需要在字符串中包含实际的双引号字符,则必须使用反斜杠(\)进行转义,即"。反斜杠(\):由于反斜杠在JSON中具有特殊含义(用于转义字符),因此如果需要在字符串中包含实际的反斜杠字符,则必须使用另一个反......