网页按钮响应回车事件

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 
    如果表单里有一个type=”submit”的按钮,回车键生效。 
    如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。 
    如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。 
    其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。

type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。

转自 天网之城

时间: 2024-07-30 20:29:03

网页按钮响应回车事件的相关文章

angularjs中响应回车事件

下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码) <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

菜鸟学JS(四)——javascript为按钮注册回车事件(设置默认按钮)

不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件. 代码非常简单,要完成这个功能,只需几行代码: //为keyListener方法注册按键事件 document.onkeydown=keyListener; function keyLis

Qt 中响应回车事件 keyPressEvent

这两天闲着用Qt把迷宫问题重写了一下, 记得当时本科学数据结构的时候写迷宫问题,各种蛋疼,现在居然一下就写出来了, 这里不再多说. 我们现在想把原来的win32黑窗口用图形化显示出来, 于是想到了QT, 我们先把原始迷宫图显示出来: 添加回车事件 在类的声明中添加 void keyPressEvent(QKeyEvent * event); 在类的实现中添加 void Dialog::keyPressEvent(QKeyEvent *event) { if (event->key() == Qt

ALV响应回车事件修改内容

修改字段BB的内容,回车后修改CC的值 步骤: 1.定义类lcl_event_handler.定义方法用于实现类CL_GUI_ALV_GRID的事件DATA_CHANGED_FINISHED,实现类.方法: 2.调用FM 'REUSE_ALV_GRID_DISPLAY_LV'时,给事件CALLER_EXIT添加FORM子程序: 3.在事件CALLER_EXIT的FORM子程序中注册回车事件.创建类lcl_event_handler对象CREATE OBJECT g_event_receiver.

AngularJs 相应回车事件

最近做项目,要用到AngularJs,之前也有用过一点点,但仅限于数据的绑定,这次项目要整个前端需要使用这个框架,可能是不熟悉的原因,感觉这代码搞起来非常的不便利,:现总结一个响应回车事件: <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="http://apps.bdimg.c

两个叠在一起的fragment,上层fragment响应下层fragment的按钮点击事件解决方法

添加onViewCreated的Touch事件监听, 以解决叠在一起的fragment上层响应下层的按钮点击事件解决方法 @Override public void onViewCreated(View view, Bundle savedInstanceState) { view.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { ret

【WebForm】编程点滴:由文本框回车触发按钮点击事件想到的

在WebFomr中我们常常会需要实现这样一个功能:文本框回车时触发触发其他按钮的click事件.在JS中我们常常这样做: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Cocos Creator 按钮响应事件

Cocos Creator版本:v1.7.0-rc.2 一.方法一 1.在LoginSceneCavans的脚本文件LoginScene.js中增加btnClick函数 btnClick(event, customEventData){ console.log("event=",event.type," data=",customEventData); }, 2.按步骤在(按钮wx_btn的属性检查器)上进行操作 ①在Click Events中填上1,然后编辑器自动

20140527-在jQuery中设置文本框回车事件

20140527-在jQuery中设置文本框回车事件 该代码要完成的效果是,用户在文本框输入完毕以后,按下回车键,立即触发"搜索"的单击事件. 例如: $("#search_user_name").keydown(function (e) {         // search_user_name为文本框ID         var curKey = e.which;         if (curKey == 13) {             // search