textbox定制回车响应

我们会经常遇到这样的问题:就是一个页面有多个文本框和多个按钮,
当然是只在一个页面下面,也就是只有一个form的情况下。

我经常会做这样的操作:我们想在文本框里输入对应的值之后
然后按回车就会有相应的按钮来对应事件的触发。

比如说:我有两个按钮 ID 分别为  btn_one ,btn_two,
同时有连个文本框 ID 分别为 txt_one, txt_two 与之相对应。

当我在 txt_one 输入值后我按回车要求触发 btn_one,

当我在 txt_two 输入值后我按回车要求触发 btn_two,

但是一个页面在加载的后默认submit始终只有一个 (btn_one),

当我不管在哪个文本框输入值之后按回车,相应的事件始终都是 btn_one;

同时又考虑到浏览器的兼容性 想了很多方法最终通过以下方法解决了这个问题:

<script type="text/javascript">

 if (document.all)//用来判断当前是否是ie浏览器
 {
    //attachEvent 方法,为某一事件附加其它的处理事件(不支持Mozilla系列)
    //onkeydown 用来捕获键盘的输入

    document.getElementById("txt_one").attachEvent("onkeydown", submitEventOne); 
    document.getElementById("txt_two").attachEvent("onkeydown", submitEventTwo);
    //document.getElementById("<% =txt_one.ClientID %>").attachEvent("onkeydown", submitEventOne);//当文本框是服务端控件时 

 }
 else
 {
    //addEventListener 方法,为某一事件附加其它的处理事件(支持Mozilla系列) 
    document.getElementById("txt_one").addEventListener("keydown", submitEventOne, false);
    document.getElementById("txt_two").addEventListener("keydown", submitEventTwo,false); 
    //document.getElementByID("<%=txt_one.ClientID%>").addEventListener("keydown",sumitEventOne,false)
 }

 function submitEventOne(ex) //ex == window.event (因在firefox下不支持event对象)
 {
    if (ex.keyCode != "13")//判断是否是 enter
       {
         
         if (!document.all)
          {
            ex.preventDefault();
           //该方法将通知 Web 浏览器不要执行与事件关联的默认动作(firefox 支持)
          }
         else
          {
            ex.cancelBubble = true;
           //该方法将通知 Web 浏览器不要执行与事件关联的默认动作(ie 支持)
          }
       }
     else
     {
        document.getElementById("<%=btn_one.ClientID %>").click();//客户端控件同理
     } 

     return false;
 }


 function submitEventTwo(ex) //ex == window.event (因在firefox下不支持event对象)
 {
    if (ex.keyCode != "13")//判断是否是 enter
       {
         
         if (!document.all)
          {
            ex.preventDefault();
          }
         else
          {
            ex.cancelBubble = true;
          }
       }
     else
     {
        document.getElementById("<%=btn_Two.ClientID %>").click();
     } 

    return false;
 }
</script>


以下为C#的.cs后台实现方式
____________________________________________

 protected void Page_Load(object sender, EventArgs e)
        {
            this.form1.Attributes.Add("onkeypress", "if(event.keyCode==13){ event.keyCode=9; return false}");


            //this.txtStocktakingName.Attributes.Add("onkeypress",
            //    "if(event.keyCode==13){document.all." + this.btnStkName.ClientID + ".focus();document.all." + this.btnStkName.ClientID + ".click();   return   false;}");
            //this.txtScanBarcode.Attributes.Add("onkeypress",
            //    "if(event.keyCode==13){document.all." + this.btnScanBarcode.ClientID + ".focus();document.all." + this.btnScanBarcode.ClientID + ".click();   return   false;}");

            this.txtStocktakingName.Attributes.Add("onkeypress",
              "if(event.keyCode==13){ document.getElementById(\"" + this.btnStkName.ClientID + "\").click();   return   false;}");
            this.txtScanBarcode.Attributes.Add("onkeypress",
                "if(event.keyCode==13){  document.getElementById(\"" + this.btnScanBarcode.ClientID + "\").click();   return   false;}");

            //this.txtScanBarcode.Attributes.Add("onfocus", "this.select();");
            string selectBarcodeScpt = "document.getElementById('" + this.txtScanBarcode.ClientID + "').focus();document.getElementById('" + this.txtScanBarcode.ClientID + "').select();";
            this.btnCancel.Attributes.Add("onclick", selectBarcodeScpt);
            this.btnApply.Attributes.Add("onclick",selectBarcodeScpt);

            this.btnPromptOk.Attributes.Add("onclick", selectBarcodeScpt);


        }

原文地址:https://www.cnblogs.com/jes_shaw/p/1557232.html