HTML,如何按回车提交表单?

HTML,如何按回车提交表单?,第1张

默认情况下,单个输入框,无论按钮的type="submit"还是type="button"类型,回车即提交。

当type="submit"时,无论有几个type="text"输入框,回车均表示提交。(<button>按钮默认的type为submit)

当type="button"时,且存在多个输入框,回车不提交。(button)

解决方案:

1.解决单个输入框的回车即提交问题,可以增加一个隐藏的input="text"display='none'然后type类型为button。

2.在form表单或input中加入:onkeydown="if(event.keyCode==13){returnfalse}"

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

在数据库中的回车是正常显示的(就是说可以看出段落),但是在HTML中却看不到回车了,整个文章是一大片,如何才能分段显示呢?

解析:

使用<pre></pre>标签包含 文章内容。

这样空格和回车将会显示出来

标题通俗的说,也就是绑定当用户按下回车键要执行的事件。解决方法比较简单,很多人都知道,本不应献丑的,但由于前几天的开发中有这个需求,做出来后觉得还是挺实用的,故还是记录下来。

在介绍本方法前,应该先说明,除了本方法外,其实还可以通过设定按钮的焦点的方法来绑定回车事件的,不过这不属于本文范围,故避开不谈。下面,入正题。

第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了。当然,还有按钮事件。

<html<head<title测试绑定enter</title

<script type="text/javascript"

function b_onclick(){alert("你好!")}</script</head<body<input type="button" value="测试按钮" id="test" onclick="b_onclick()" /</body</html第二步,于b_onclick()函数加入如下js代码:

function document.onkeydown(){//使用document.getElementById获取到按钮对象

var button = document.getElementById("test")

if(event.keyCode == 13){button.click()

event.returnValue = false}}然后于IE中运行,你会发现,即使焦点不在按钮上,当你按下回车,依然执行了按钮的函数。

稍微解释一下代码:

event.keyCode == 13是判断按下的是那一个间,13代表的是回车键。

button.click()执行按钮事件。

event.returnValue = false这个是为了防止浏览器捕捉到用户按下回车键而进行其他 *** 作。例如假如输入框中,没有这行代码的话,在执行完按钮事件后,其还会执行换行的动作。

第三步,很多人都认为做完上面的工作已经完成了整个作业。其实不是的。你尝试使用firefox浏览,就会发现,代码并不会执行。显然,这是因为firefox不支持event事件对象。为了做到跨浏览器,不得不将代码进行优化。

我们可以这个做:

首先,为boby添加一个onkeydown监控函数,如

<body onkeydown="BindEnter(event)"。

其次修改原来的绑定函数为:

function BindEnter(obj){//使用document.getElementById获取到按钮对象

var button = document.getElementById('test')

if(obj.keyCode == 13){button.click()

OK,到这里已经基本完成了。完整代码如下:<html<head<title测试绑定enter</title

<script type="text/javascript"

function b_onclick(){alert("你好!")}function BindEnter(obj){//使用document.getElementById获取到按钮对象

var button = document.getElementById('test')

if(obj.keyCode == 13){button.click()

<input type="button" value="测试按钮" id="test" onclick="b_onclick()" /</body</html水平有限,如有错漏,还请指正。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7967376.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存