zoukankan      html  css  js  c++  java
  • 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);


            }

  • 相关阅读:
    线段树专辑—— pku 1436 Horizontally Visible Segments
    线段树专辑——pku 3667 Hotel
    线段树专辑——hdu 1540 Tunnel Warfare
    线段树专辑—— hdu 1828 Picture
    线段树专辑—— hdu 1542 Atlantis
    线段树专辑 —— pku 2482 Stars in Your Window
    线段树专辑 —— pku 3225 Help with Intervals
    线段树专辑—— hdu 1255 覆盖的面积
    线段树专辑—— hdu 3016 Man Down
    Ajax跨域访问
  • 原文地址:https://www.cnblogs.com/jes_shaw/p/1557232.html
Copyright © 2011-2022 走看看