HTML - 输入框 Input 按回车 Enter 自动刷新页面解决方案

简介: HTML - 输入框 Input 按回车 Enter 自动刷新页面解决方案

背景

最近加入了一套回车自动查询的方法,好几个界面都加好了,可是就是有一个界面的回车事件总是不生效并且似乎还自动刷新了整个界面。

$("input[name='projectName']").keyup(function(){
if(event.keyCode==13){
reloadGrid(); // 自己封装的方法     }
});

分析

当我删除掉了写的 keyup 方法之后一样出现了回车自动刷新整个界面的情况,因页面最初不是自己写的,我查询了整个关于这个输入框的绑定事件似乎都没有造成这个情况的可能。

<inputtype="text"class="form-control"id="projectName"name="projectName"placeholder="请输入项目名称"/>

甚至当我删除掉了 id、name 属性一样会有自动刷新的情况,然后就推断出不是绑定了事件。

然后又想到可不可能是有人写过哪个元素的第几个子元素之类的,我在这个 input 下面加入了一个新的 input。

<inputtype="text"class="form-control"placeholder="请输入项目名称"/><inputtype="text"class="form-control"placeholder="wingzing"/>

发现加入了新的 input 之后,不会出现自动刷新整个页面的情况了,立刻想到是不是这个 form 表单的原因。

原因

在一个 form 表单中,若只有一个 input,按回车键表单会自动提交,但是当表单中存在多个 input 时,按回车键不会执行任何操作,这是 form 表单的一个特性。

解决

1、直接去除掉 form 表单,当然这是最简单粗暴的方法。

2、如果一个 input 会自动提交,那么比较容易想到的是再加一个 input。值得注意的是 这里的 input 不能设置 type 为 hidden,这样一样是不生效的,form 一样会认为只有一个 input。需要设置成  。

3、给 input 加上回车事件直接 return false。在 input 加上 οnkeydοwn="if(event.keyCode==13){return false;} 。

4、直接阻止 form 表单的提交,在 form 表单加入 οnsubmit="return false;"。

目录
相关文章
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
73 7
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`&lt;input type=&quot;tel&quot;&gt;` 用于输入电话号码;`&lt;input type=&quot;time&quot;&gt;` 允许用户选择时间(不带时区);`&lt;input type=&quot;url&quot;&gt;` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型2
`&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型3
`&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`&lt;input type=&quot;color&quot;&gt;`允许用户通过颜色选择器选取颜色,而`&lt;input type=&quot;date&quot;&gt;`则提供了一个日期选择器来方便用户选择日期。
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
75 11
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
69 0
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
62 2
|
2月前
|
移动开发 HTML5
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。