Form表单input回车提交问题

最新推荐文章于 2024-02-27 10:09:22 发布
最新推荐文章于 2024-02-27 10:09:22 发布
阅读量3.1k 收藏 3
点赞数
分类专栏： HTML

问题：文本框输入完成后点击回车页面刷新
问题出在form上，当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容，就会发生刷新事件。

发现问题所在就好解决问题了。

现在有三种解决方案：

1.全局禁用回车事件

function document.onkeydown() {
        var e = event.srcElement;
        if (event.keyCode == 13) {
            return false;
        }
}

但是这样会出现想要使用回车又不能用的尴尬用提。

2.单独去掉输入框的回车事件的方法

<input type="text"  onkeydown="return ClearSubmit(event)" />
function ClearSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

这样就不会上面的那种尴尬情况，但是也需要创建一个方法，代码臃肿。

3.增加一个隐藏的输入框

<input id="hiddenText" type="text" style="display:none" />

增加了一个隐藏的输入框之后，表单的文本框不再是唯一的，回车不会触发提交事件。本人喜欢这个。

4. 如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。
        由于 onsubmit 句柄可以取消表单的提交，所以它对于进行表单验证是十分理想的；

        这样的话，修改form的onsubmit事件可以让敲入回车的时候执行我们想要的操作而不跳转到action所指定的url，如下：

 <form action="myurl" onSubmit="fun1();return false;">

浏览器在表单提交上的默认行为，这种情况一般都在什么时候发生呢，以ie为例，讲讲它在什么情况下会发生这样的现象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK">
	<title>submit例子 - aspxhome.com</title>
</head>
<body>
	<h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
	<h2>默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="button" value="提交">
	</form>
	<h2>一个文本框的时候怎么才能做到不提交，方法是加一个隐藏掉的文本框</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text" style="display:none">
		<input type="button" value="提交">
	</form>
	<h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="submit" value="提交">
	</form>
	<h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<input type="submit" value="提交">
	</form>
	<h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<input type="button" value="提交">
	</form>
	<h2>用button元素时，FX和IE下有不同的表现</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<button>提交</button>
	</form>
	<h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="radio" name="a">
		<input type="checkbox" name="b">
		<input type="checkbox" name="c">
		<input type="button" value="提交">
	</form>
	<h2>type为image的按钮，等同于type为submit的效果</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<input type="image" src="/images/logo.gif">
	</form>
</body>
</html>

   们知道了Enter键提交的原理之后我们很明显就有了相对应的解决方法
通常我们用的方法有两种:
1.我们在form标签中来禁止enter键提交

<form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();">

2.我们可以在form中增加一个隐藏的输入框

 

dz45693
关注
专栏目录
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
01-08
一个列表界面只有一个输入框查询条件，当首次进入在输入框中输入汉字后，按回车键发现输入框中汉字变成乱码！本以为一个很简单不过的问题，结果却花了好久才找到原因（据说是浏览器问题），按回车后执行了两次查询。 1、未修改前代码： <form id=ff name=ff method=post> <input type=text id=userName name=userName size=12 maxlength='30' value=${(data.userName)!''} onKeypress= [removed]if(event.keyCode==1
禁止按回车键提交表单的方法
09-03
在网页开发中，用户按下回车键通常会触发表单的提交操作，这在某些情况下可能会导致意外的结果，比如在搜索框中按回车可能会刷新整个页面。本文将详细讲解如何禁止用户通过回车键来提交表单，以避免这种不必要的行为...
Form表单按回车自动提交表单的实现方法
11-28
1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=”text”/>按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法： (1) 添加一个<input type=’text’
form表单的单输入框回车出现同步提交事件处理
wzp20092009的博客
02-22 2592
form表单中如果只有一个输入框，在输入时按Enter回车键会出发默认事件自动提交表单，该交互是同步发生的，会导致页面刷新。
form 回车
jamm1986的专栏
09-02 241
表单中回车会有默认的提交。 [size=large]我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规...
回车键提交与不提交表单的解决方法
a240856742的博客
11-07 628
最近遇到IE6/7下敲击回车后表单不提交的问题,网上找到些资料,备案下: 回车键提交表单：设置 <input /> 标签或者 <button> 标签的属性 type="submit" 即可。 回车键不提交表单，用JavaScript来解决，具体代码如下： document.getElementsByTagName('form')[0].onkeyd...
Form中的回车
tjmljw的专栏
02-10 122
Form中有两个控件：分别是textbox和button，按下button调用js方法进行ajax处理。 [code="html"] [/code] 问题： 把焦点放在textbox中，按下回车，页面发生跳转，form中的内容显示在了整个浏览器中（而不是预想的div中），这时js没有被调用。也就是说只是client端的动作。 解决： 把两个控件移到form外面。 ...
如何防止INPUT按回车自动提交表单FORM
11-29
总结来说，防止`<input>`按回车自动提交`<form>`表单，可以通过增加隐藏的`<input>`元素或者使用JavaScript监听并阻止回车键的默认行为。这两种技术在实际开发中都得到了广泛的应用，可以根据项目需求选择适合的实现...
html 禁用回车提交,HTML防止input回车提交表单
weixin_36122413的博客
06-10 699
原链接：https://blog.csdn.net/ligang2585116/article/details/44699567自动提交情况说明：1.默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交。2.当type="submit"时，无论有几个type="text"输入框，回车均表示提交。(按钮默认的type为submit)3.当type...
Form 表单回车自动提交问题
qq_36428598的博客
05-17 189
window.event.keyCode==13 代表的就是回车键Enter，意思就是点击回车。给input绑定onkeydown事件。
Ant Design Mobile Form.Item 自定义组件，失去焦点的时候如何操作
weixin_43814775的博客
04-28 1031
Ant Design Mobile Form.Item 自定义组件，失去焦点的时候如何操作
html回车键导致form提交的问题
ben_gmail的专栏
08-11 4510
转载自:http://www.cnspeed.com/info/Article/dhtml/200909/4049.html      我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为，希望输入完关键词之后
《前端技巧》HTML页面防止input回车造成提交表单
tomatocc的博客
01-15 3283
网上的方法又很多种，比如： 1.当type="submit"时，无论有几个type="text"输入框，回车均表示提交。（按钮默认的type为submit） 2.当type="button"时，且存在多个输入框，回车不提交。（button）  但是在实际开发中，由于前端框架不一样，所以这样的修改是有很多的局限性。所以推荐下面这个方法； .在form表单或input中加入：onkeydo
防止INPUT按回车自动提交form表单
zxjdC的博客
10-16 899
需求描述： 当前页面有一个查询框，当该input框按下回车键时，希望默认走查询方法，从列表中查询符合条件的成员，但是浏览器默认的情况下，在input框按下回车键，会触发表单提交（保存按钮）。 解决思路： 阻止表单上按下回车键时自动提交； 给input框绑定事件，指定当按下回车键时触发查询； 实现代码 <form id="search_form" class="form-horizontal clearfix" role="form" method="post"> <div c
关于form表单中的input按下enter键自动提交解决办法
mac文的java路
08-27 591
http://www.nowamagic.net/html/html_EnterCouseReflesh.php
学习在js中屏蔽回车自动提交表单的功能，html利用input防止回车提交
最新发布
徊忆羽菲
02-27 1150
学习在js中屏蔽回车自动提交表单的功能，html利用input防止回车提交
Form表单 回车(Enter)提交表单问题
qq_37609418的博客
06-15 8291
在Form表单中input会自动响应回车事件。这是表单的默认提交动作。表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。而点击Enter键会触发form表单提交。这被称为隐式提交，如果要阻止回车键提交表单，可以在form标签内添加如下代码 ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，n
Form表单Input中按enter键自动提交的问题
Mr_linjw的专栏
10-17 2179
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个。，按回车键表单会自动提交，但是当表单中存在多个。时，按回车键不会执行任何操作，这是。
vue input 回车提交表单
09-08
要在Vue中实现在输入框中按回车键提交表单，可以使用`@keyup.enter`事件来监听回车键的按下事件。以下是一个示例代码： ```html <template> <div> <input type="text" v-model="inputValue" @keyup.enter="submitForm" /> <button @click="submitForm">Submit</button> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { submitForm() { // 在这里触发提交表单的操作 // 例如：发送网络请求或执行其他逻辑 console.log('Form submitted!'); } } }; </script> ``` 在上面的示例中，使用`v-model`指令将输入框的值绑定到`inputValue`属性上。然后，使用`@keyup.enter`事件监听回车键的按下事件，当回车键被按下时，会触发`submitForm`方法。在`submitForm`方法中，你可以执行提交表单的操作，比如发送网络请求或执行其他逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值