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

通过下面的代码可以实现这种切换的效果。

首先我们来看界面：
界面代码：


代码如下:

<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 200px;">
<table cellpadding="3" cellspacing="3" border="0">
<tr>
<td>
<asp:Label ID="lblName" Text="姓名: " runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" Width="200px" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAddress" Text="地址: " runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress" Width="200px" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblContact" Text="联系电话: " runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtContact" Width="200px" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" Text="电子邮箱: " runat="server"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" Width="200px" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" Text="提交" runat="server" />
<asp:Button ID="btnReset" Text="重置" runat="server" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>

脚本代码：


代码如下:

<head runat="server">
<title>Recipe2</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input:text:first").focus(); // TextBox转换成html控件为<input type="text"/>
$("input:text").bind("keydown", function (e) {
if (e.which == 13) { // 获取Enter键值
e.preventDefault(); // 阻止表单按Enter键默认行为，防止按回车键提交表单
var nextIndex = $("input:text").index(this) + 1;
$("input:text")[nextIndex].focus();
}
});
$("#<%=btnReset.ClientID%>").click(function () {
$("form")[0].reset();
});
});
</script>
</head>

赞 (0)

相关推荐

  • 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 TextBox的TextChanged事件使用介绍

    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 jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)

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

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

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

    近期在做一个Web项目,我使用DevExpress第三方控件. 由于该控件使用技巧中文资料较少,还真够呛的,只能边摸索,边开发. 今天我要实现一些编辑框如ASPxTextBox.ASPxComboBox等控件回车模拟Tab的功能.这没办法,用户用惯了回车,讨厌按Tab来移动焦点(鼠标点击更麻烦). 以ASPxTextBox为例,在ClientSideEvents属性中可设置许多客户端JavaScript代码,其中KeyPress就是我要写的. 首先,得准备要模拟Tab的JS代码,这网上很多,我随

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

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

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

  • 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 实例1(在TextBox里面创建一个默认提示)

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

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

  • ASP.net Textbox的技巧使用

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

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

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

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

随机推荐