`
xiaofengtoo
  • 浏览: 493799 次
  • 性别: Icon_minigender_1
  • 来自: xiamen
社区版块
存档分类
最新评论

如何在网页中绑定回车键事件

 
阅读更多

网页添加回车事件,新手总会不理解,网上搜索了几个做个备份,让她们自己看去。

 

首先:

如何在网页中绑定回车键事件

标题通俗的说,也就是绑定当用户按下回车键要执行的事件。解决方法比较简单,很多人都知道,本不应献丑的,但由于前几天的开发中有这个需求,做出来后觉得还是挺实用的,故还是记录下来。
在介绍本方法前,应该先说明,除了本方法外,其实还可以通过设定按钮的焦点的方法来绑定回车事件的,不过这不属于本文范围,故避开不谈。下面,入正题。
第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了。当然,还有按钮事件。
<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();
            obj.returnValue = false;
        }
}

为什么要将事件对象作为参数传递呢?这是为了避免进行浏览器判别,节省代码。
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();
            obj.returnValue = false;
        }
}
</script>
</head>
<body onkeydown="BindEnter(event)">
<input type="button" value="测试按钮" id="test" onclick="b_onclick()" />
</body>
</html>

 

其次:

http://www.4ucode.com/Study/Topic/2101838

 

<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/app.tld" prefix="app" %>

<bean:define id="catalog" name="request.catalog" />
<html:form action="/iCacheMngAction.do?catalogId=${catalog}">
<html:hidden property="method" value="queryAppInfo" />
<table width="100%" border="0" align="center" cellpadding="1"
		cellspacing="1" class="input_data_table">	
<tr>
<td>
<logic:notEmpty name="request.error" scope="request">   
   <strong><font class='f_red'>你要删除的服务器地址被引用</font></strong>
   <br/>   
 </logic:notEmpty> 
 </td>
 </tr>
 </table>
 
<table width="100%" border="0" cellpadding="1" cellspacing="1" class="list_data_table">
	<tr>
		<td width="20%" height="30" class="input_data_table_td0" align="center">服务器描述</td>
		<td width="30%" height="30" class="whiteBG"><html:text property="ICacheVO.cache_server_desc" onkeydown="enterIn(event,this.form);"></html:text></td>
		<td width="20%" height="30" class="input_data_table_td0" align="center">服务器地址</td>
		<td width="30%" height="30" class="whiteBG"><html:text property="ICacheVO.cache_server_address" onkeydown="enterIn(event,this.form);"></html:text></td>
	</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="input_data_table">
  <tr>
	<td  height="45"  align="center" class="whiteBG">
		<input type="button" name="saveType" value="查询" onclick="query(this.form);" class="button"/>
		<input type="button" name="clearType" value="重置" onclick="testclear(this.form);" class="button"/>
	</td>
  </tr>
</table>

</html:form>

<script language="javascript">
	//查询
 	function query(form){
 		 document.all["pagination.current"].value = "1";
		 form.submit();
	}
	function testclear(form){
		document.getElementById('ICacheVO.cache_server_desc').value = '';
		document.getElementById('ICacheVO.cache_server_address').value = '';
		form.submit();
	}
	function enterIn(evt,form){
	  var evt = evt?evt:(window.event?window.event:null);//兼容IE和FF
	  if (evt.keyCode==13){
		  query(form);
		}
	}
</script>

分享到:
评论

相关推荐

    jQuery实现当按下回车键时绑定点击事件

    综上所述,通过结合`keydown`事件监听和`click`事件触发,我们可以在用户按下回车键时,执行预设的按钮点击事件。这种方法不仅简洁,而且在网页设计中非常实用,提高了用户的操作效率,改善了交互体验。此外,这种...

    .net,js捕捉文本框回车键事件的小例子(兼容多浏览器).docx

    在网页开发中,捕获用户在文本框(TextBox)中按下回车键的事件是非常常见的需求,这通常用于实现表单提交或者执行特定的操作。在不同的浏览器中,处理这种事件的方式可能会有所不同。本文将详细解释如何使用...

    textbox绑定回车

    总的来说,绑定TextBox的回车事件在ASP.NET中可以通过结合HTML、JavaScript和C#代码实现。通过监听键盘事件,处理回车键,然后调用服务器端的方法,可以在用户按下回车时执行相应的操作,提升应用的交互性和用户体验...

    jquery 监听 键盘 事件

    有时我们可能希望阻止键盘事件的默认行为,比如阻止回车键提交表单。可以使用`event.preventDefault()`来实现: ```javascript $('input').on('keydown', function(event) { if (event.keyCode === 13) { // Enter...

    绑定回车enter事件代码

    在网页开发中,有时我们需要监听用户的键盘操作,特别是当用户按下回车键(Enter键)时,执行特定的功能。这通常涉及到JavaScript事件处理,特别是键盘事件。本文将深入讲解如何在JavaScript中绑定回车事件,以及一...

    jQuery搜索框实例绑定提交事件.zip

    本实例"jQuery搜索框实例绑定提交事件.zip"着重展示了如何利用jQuery来创建一个功能完善的搜索框,其中包括下拉选择搜索引擎分类,并在用户按下键盘回车键时自动触发提交搜索请求的功能。 首先,`index.html`是网页...

    jQuery键盘按键按钮响应事件代码.zip

    在"jQuery键盘按键按钮响应事件代码"这个示例中,可能还包括了其他键码的处理,以便实现更丰富的交互。例如,F5键刷新页面,或者使用方向键进行导航等。文件"说明.htm"可能会详细解释每种键码对应的处理逻辑以及如何...

    jquery 扑捉回车键事件代码

    2. 回车键提交多个表单:如果页面上有多个表单,并且希望在不同的表单中使用回车键提交不同的表单,可以通过选择器精确选择目标表单,或者给不同的表单添加不同的类名,然后绑定事件处理器到对应的类。 3. 与表单...

    jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    首先,键盘事件在JavaScript和jQuery中扮演着重要的角色,它们允许开发者响应用户的键盘输入。jQuery提供了三个主要的键盘事件:`keydown`、`keyup`和`keypress`。 1. `keydown`事件:这是键盘事件序列的第一个触发...

    onkeydown事件解决按回车键直接提交数据的需求

    在上述代码中,我们通过`onkeydown`事件处理器`checkEnter`来检测用户是否按下了回车键,如果用户按下回车键,则找到表单的提交按钮并模拟点击,从而实现表单的提交。这种方法避免了直接在`&lt;form&gt;`标签上绑定`...

    禁止按回车键提交表单的方法

    在网页开发中,用户按下回车键通常会触发表单的提交操作,这在某些情况下可能会导致意外的结果,比如在搜索框中按回车可能会刷新整个页面。本文将详细讲解如何禁止用户通过回车键来提交表单,以避免这种不必要的行为...

    浅谈键盘上回车按钮的js触发事件

    但为了说明如何绑定`keyup`事件,并在按下回车键时执行函数,这里使用了`$("#querySearcher").live("keyup", function(e){ if(e.keyCode==13){ xxxxxx(); } });`这段代码的意思是在id为`querySearcher`的HTML元素上...

    处理键盘事件

    例如,如果用户按下了回车键,我们可能要触发一个提交操作;如果按下的是字母键,可能要更新显示的文本。 4. **响应反馈**:程序需要有适当的反馈机制,告诉用户他们的键盘输入已被处理。这可能是改变屏幕上的显示...

    js 绑定键盘鼠标事件示例代码

    在这篇文档中,将要学习如何使用JavaScript以及jQuery(简称为jq)绑定键盘和鼠标事件,尤其是如何通过绑定回车键实现提交功能,同时文中指出在某些情况下不使用form标签也可以实现提交。 首先,我们先从键盘事件...

    enter键控制input光标移动到下一个框

    在网页设计中,用户与页面交互的一个常见行为是使用键盘进行导航,特别是使用"Enter"键来提交表单或在多个输入框之间切换。本文将深入探讨如何利用HTML和jQuery实现"Enter"键控制input光标移动的功能,使得用户在按...

    JS网页键盘交互式代码.zip

    在JavaScript中,我们可以使用`addEventListener`函数来绑定键盘事件监听器。主要有三个关键的键盘事件:`keydown`(当用户按下键盘键时触发)、`keyup`(当用户释放键盘键时触发)和`keypress`(对于某些字符键,当...

    使用JS监听键盘按下事件(keydown event)

    其中,keydown事件在用户按下键盘上的任意键时触发,keypress事件在按键被按下并产生字符时触发,keyup事件则在键盘键被释放时触发。本文主要关注keydown事件的监听。 要监听全局的键盘按下事件,可以使用jQuery中...

    表单切换,用回车键替换Tab健(不支持IE)

    然而,有些场景下,开发者可能希望用户能够通过回车键(Enter键)来完成这个过程,特别是在移动端或者有特殊交互需求的项目中。本文将探讨如何在不支持IE浏览器的情况下,用JavaScript实现表单输入元素之间使用回车...

Global site tag (gtag.js) - Google Analytics