js文本框回车事件实现代码

发布时间:2020-02-17编辑:脚本学堂
本文介绍了js实现文本框回车事件的实例代码,不管在哪个文本框敲回车,总是触发第一个按钮的事件,需要的朋友参考下。

需求:
有一个页面有两个按钮,两个文本框,登录时敲回车键触发"登录"事件,但是搜索时敲回车键也触发"登录"事件,其实应触发"搜索事件"。
实际上不管在哪个文本框敲回车,总是触发第一个按钮的事件 (这是由于通常回车键默认触发第一按钮的事件)。

要点:
1,登录的文本框是HTML控件,搜索是Asp.net控件,添加事件的方式不同;
2,给button控件设置属性: UseSubmitBehavior="False",将Button的type由submit变为button;
3,取得button控件的ID: document.getElementById('<%=imgLogin.ClientID %>')

1,前台代码:
 

复制代码 代码示例:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gly.aspx.cs" Inherits="gly" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>文本框回车事件 - www.jb200.com</title>
<script type="text/javascript">
function t_Login() {
if (event.keyCode == 13) {
  document.getElementById('<%=imgLogin.ClientID %>').onclick();//注意这个地方拿ID,
 }
 }

 function search() {
    if (event.keyCode == 13) {
  document.getElementById('<%=imgsearch.ClientID %>').onclick();
  }
 }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
 登陆:
 <input name="textfield" type="text" id="txtUserName" runat="server" onkeydown="t_Login();" />
 <asp:Button ID="imgLogin" runat="server" OnClick="imgLogin_Click"
     UseSubmitBehavior="False" Text="登陆" />
 <br/>
 搜索:
 <asp:TextBox runat="server" ID="txtkey"/>
  
 <asp:Button ID="imgsearch" runat="server" OnClick="imgsearch_Click"
     UseSubmitBehavior="False" Text="搜索" />     
    </div>
    </form>
</body>
</html>

2,后台代码:
 

复制代码 代码示例:

using System;
public partial class gly : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 //登录的文本框是HTML控件,搜索是Asp.net控件。为文本框添加事件的方法不同。
 txtkey.Attributes.Add("onkeydown", "search();");
    }

    protected void imgLogin_Click(object sender, EventArgs e)
    {
 //登陆...
 if(txtUserName.Value!="")
 {
     Response.Write("登陆...");  
 }
    }

    protected void imgsearch_Click(object sender, EventArgs e)
    {
 //搜索
 if(txtkey.Text!="")
 {
     Response.Write("搜索...");
 }
    }
}