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);


            }

  • 相关阅读:
    坐标变化
    labelme VOC
    threejs物体设置中心坐标
    IfcProjectOrderTypeEnum
    IfcCostItemTypeEnum
    利用Mono.Cecil动态修改程序集来破解商业组件(仅用于研究学习)
    依赖注入框架Autofac的简单使用
    阿里技术嘉年华官网上线啦!
    Silverlight 4以下版本模拟鼠标双击事件
    iOS学习系列 利用ASIHTTPRequest实现异步队列
  • 原文地址:https://www.cnblogs.com/jes_shaw/p/1557232.html
Copyright © 2011-2022 走看看