ASP.net Textbox的技巧使用

①、大家在做Web开发的时候，可能也会遇到之前我所遇到的问题，在使用TextBox控件时，控件的边缘不能被背景图片完全覆盖掉，如图1：

因为Textbox解析后也是html—Text控件，而Text控件是默认有边，即是border:1px solid #000;

所以只要为Textbox控件加上如下的一小句CSS就可以了，即是“border:0px”，最后效果如图2：

②、大家在做Web开发时，不知道大家有没有发现，当将Textbox控件的TextMode = "MultiLine"，其实MaxLength已经失效了。

因为Textbox的属性TextMode为"MultiLine"时，其实解析过后是html—textarea控件，这个html控件是没有MaxLength属性的。

如果这时还想限制其输入长度：可以设置如下属性：

<asp:TextBox ID = "reply_note" runat = "server" TextMode = "MultiLine" onkeyup="this.value = this.value.slice(0, 1000)">

③、大家在做某些输入框时，可能希望做到得到焦点时触发某个事件，失焦时触发某个事件：

我写了两个JS刚好满足了如下效果：


代码如下:

<script type="text/javascript">
　　//得到焦点时触发事件
　　function onFocusFun(element, elementValue) {
　　 if (element.value == elementValue) {
　　 element.value = "";
　　 element.style.color = "";
　　 }
　　}

　　//离开输入框时触发事件
　　function onblurFun(element, elementValue) {
　　 if (element.value == '') {
　　 element.style.color = "#808080";
　　 element.value = elementValue;
　　 }
　　}
　　</script>

然后，如下在Textbox控件中引用它们就可以了：


代码如下:

<asp:TextBox ID = "reply_note" runat = "server" Text="帖子回复,输入字数限制为1000字" ForeColor = "#808080" OnFocus="onFocusFun(this,'帖子回复,输入字数限制为1000字')"
OnBlur="onblurFun(this,'帖子回复,输入字数限制为1000字')"></asp:TextBox>

这就是我最近开发的一点小技巧，可能网上已经写过类似的了，但这些方法，我个人觉得还是比较简单易懂，希望可以帮到大家。

如果大家有其他类似的小技巧，可以留言一起交流一下。

赞 (0)

相关推荐

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

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

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

  • 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回车事件的解决方法

    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中 TextBox 文本输入框控件的使用方法

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

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

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

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

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

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

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

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

    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中TextBox只能输入数字的最简洁的两种方法

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

  • 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中添加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

随机推荐