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

最新推荐文章于 2024-05-12 22:39:56 发布

xiaofengtoo

最新推荐文章于 2024-05-12 22:39:56 发布

阅读量386

点赞数

分类专栏： css/js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xiaofengtoo/article/details/84088181

版权

css/js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

首先：

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

标题通俗的说，也就是绑定当用户按下回车键要执行的事件。解决方法比较简单，很多人都知道，本不应献丑的，但由于前几天的开发中有这个需求，做出来后觉得还是挺实用的，故还是记录下来。
在介绍本方法前，应该先说明，除了本方法外，其实还可以通过设定按钮的焦点的方法来绑定回车事件的，不过这不属于本文范围，故避开不谈。下面，入正题。
第一步，先编写简单的页面代码，这里我们只需要一个按钮就足够了。当然，还有按钮事件。
<html>
<head>
<title>测试绑定enter</title>
<script type="text/javascript">
function b_onclick()
{
    alert("你好！");
}
</script>
</head>
<body>
<input type="button" value="测试按钮" id="test" οnclick="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 οnkeydοwn="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 οnkeydοwn="BindEnter(event)">
<input type="button" value="测试按钮" id="test" οnclick="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" οnkeydοwn="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" οnkeydοwn="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="查询" οnclick="query(this.form);" class="button"/>
		<input type="button" name="clearType" value="重置" οnclick="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>

xiaofengtoo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在网页中绑定回车键事件

网页添加回车事件,新手总会不理解，网上搜索了几个做个备份，让她们自己看去。首先：如何在网页中绑定回车键事件标题通俗的说，也就是绑定当用户按下回车键要执行的事件。解决方法比较简单，很多人都知道，本不应献丑的，但由于前几天的开发中有这个需求，做出来后觉得还是挺实用的，故还是记录下来。在介绍本方法前，应该先说明，除了本方法外，其实还可以通过设定按钮的焦点的方法来绑定回车...
复制链接

扫一扫