asp.net ASPxTextBox等控件实现"回车模拟Tab"的 常用代码整理

近期在做一个Web项目,我使用DevExpress第三方控件。
由于该控件使用技巧中文资料较少,还真够呛的,只能边摸索,边开发。

今天我要实现一些编辑框如ASPxTextBox、ASPxComboBox等控件回车模拟Tab的功能。这没办法,用户用惯了回车,讨厌按Tab来移动焦点(鼠标点击更麻烦)。

以ASPxTextBox为例,在ClientSideEvents属性中可设置许多客户端JavaScript代码,其中KeyPress就是我要写的。

首先,得准备要模拟Tab的JS代码,这网上很多,我随便D了一个,试试有用,贴出如下:


代码如下:

//回车键模拟tab 在onkeydown中
function EnterAsTab()
{
var el_keydown=window.event.srcElement;
  var len;
if ((window.event.keyCode==13&&el_keydown.type!="textarea")
|| (window.event.keyCode==13 && window.event.ctrlKey && el_keydown.type=="textarea"))
{
len = document.forms(0).length;
    for (var i=0;i<len;i++)
    {    
      if (document.forms(0).elements(i)==el_keydown)
      {
        //跳过hidden、disabled类型的输入框
        //如果下个控件是按钮,也要求跳过再下一个,直到非按钮或无控件
        do
         {        
           i++;
           if(i>=len)
           return;
         }
         while ((document.forms(0).elements(i).disabled||document.forms(0).elements(i).type=='hidden'
           || document.forms(0).elements(i).type=='button'
           || document.forms(0).elements(i).type=='submit'
           || document.forms(0).elements(i).type=='reset'
           || document.forms(0).elements(i).type=='href'));
         //alert('对象'+i+'类型:'+document.forms(0).elements(i).type);
         document.forms(0).elements(i).focus();
         document.forms(0).elements(i).select();
        event.returnValue=false; //抛弃多余的回车,否则进入textarea、button会直接送出回车!
        return;
      }
    }
  }
}

接着,就在ASPxEditBox控件HTML代码中插入KeyPress事件代码了。


代码如下:

<dxe:ASPxTextBox ID="txtCodeName" runat="server" Width="170px"
Text='<%# Bind("CodeName") %>'>
<ClientSideEvents KeyPress="function(s,e){var key = event.keyCode;
if( key==13){EnterAsTab();}}" />
</dxe:ASPxTextBox>

先获取键值event.keyCode,赋值给key。然后判断键值是否等于13(回车键),如果是,则调用前面的JS函数EnterAsTab()。
其它控件类似。

(0)

相关推荐

  • asp.net中绑定TextBox回车事件的解决方法

    1.将页面上的回车事件都绑定到按钮上 复制代码 代码如下: function EnterTextBox(e) { var msie = (document.all) ? true : false; var keycode; if(!msie) keycode = window.event ? e.keyCode : e.which; else keycode = e.keyCode; //alert(keycode); if(keycode==13 && document.getEleme

  • ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)

    通过下面的代码可以实现这种切换的效果. 首先我们来看界面: 界面代码: 复制代码 代码如下: <body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 200px;"> <table cellpadding="3"

  • ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)

    当用户要输入一些密码.信用卡信息和银行账号等敏感信息,用户更希望手工通过键盘敲入数据,而好过通过剪贴板复制粘贴. 我们先来看下实现后的效果: 输入新密码 复制新密码出现如下对话框 界面代码 复制代码 代码如下: <body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; h

  • Asp.net TextBox的TextChanged事件使用介绍

    在博客园里有位兄弟问了我一个问题,动态创建的控件是如何加载视图状态,还提到ProcessPostData方法的调用.这里我就用TextBox的TextChanged事件来说说视图数据的加载以及事件的触发. 我们首先还是来看一个demo吧: 代码如下: 运行结果如图: 现在我们来修改文本框的值,然后点击按钮提交页面,看看有什么事情发生 TextBox的TextChanged事件这时候发生了,运行结果如图: 现在我们什么也不做,再次点击按钮提交,看看会有什么效果: 这是为什么了,TextBox的Te

  • ASP.NET中为TextBox中添加calendar.js示例代码

    1.在工程文件下面新建文件夹"js",然后向其中添加JavaScript.js新建项,重命名为calendar.js. 2.向calendar.js中写入代码, 复制代码 代码如下: var cal; var isFocus=false; //是否为焦点 //function SelectDate(obj,strFormat) //两个参数改为只传一个 function SelectDate(obj) { var date = new Date(); var by = date.get

  • Asp.net之TextBox只允许输入数字的方法总结

    复制代码 代码如下: <asp:textbox id="TextBox1" onkeyup="if(isNaN(value))execCommand('undo')" runat="server" Width="80px" onafterpaste="if(isNaN(value))execCommand('undo')"></asp:textbox> 其实服务器控件也能加上onke

  • ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)

    当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. 当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示. 为了实现上面的需求,代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx.cs" Inherits="Recipe1" %> <!DOCTYPE html PUB

  • asp.net中TextBox只能输入数字的最简洁的两种方法

    如下TextBox 复制代码 代码如下: <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server"></asp:textbox> 1. 在页面中添加一段脚本: 复制代码 代码如下: <scriptlanguage="javascript">functionisnum(){if(event.keyCode<45||event.

  • ASP.net Textbox的技巧使用

    ①.大家在做Web开发的时候,可能也会遇到之前我所遇到的问题,在使用TextBox控件时,控件的边缘不能被背景图片完全覆盖掉,如图1: 因为Textbox解析后也是html-Text控件,而Text控件是默认有边,即是border:1px solid #000; 所以只要为Textbox控件加上如下的一小句CSS就可以了,即是"border:0px",最后效果如图2: ②.大家在做Web开发时,不知道大家有没有发现,当将Textbox控件的TextMode = "MultiL

  • ASP.NET中 TextBox 文本输入框控件的使用方法

    TextBox控件又称文本框控件,为用户提供输入文本的功能. 1.属性 TextBox控件的常用属性及说明如表1所示. 表1 TextBox控件常用属性及说明 属性 说明 AutoPostBack 获取或设置一个值,该值指示无论何时用户在TextBox控件中按〈Enter〉键或〈Tab〉键时,是否自动回发到服务器的操作 CausesValidation 获取或设置一个值,该值指示当TextBox控件设置为在回发发生时进行验证,是否执行验证 ID 控件ID Text 控件要显示的文本 TextMo

  • ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)

    在这节,我们将看到如何把多行文本框的内容复制到剪贴板上. 注意:jQuery clipboard plugin 只支持IE 界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 300px;"> <p>请输入你的评论

随机推荐