显示TEXTAREA文本框剩余字数

本文介绍了一种在ASP.NET中实现留言框字符限制的方法,通过JavaScript脚本实时监测输入内容长度并给予提示,确保用户输入不超过限定字符数。
ExpandedBlockStart.gifContractedBlock.gif<script type="text/javascript" language="javascript">         function   textCounter(field,   maxlimit)       {           if   (document.getElementById(field).value.length   >   maxlimit)         {        document.getElementById(field).value   =   document.getElementById(field).value.substring(0,maxlimit);          }        else           {        document.getElementById("remLen").value   =   maxlimit   -   document.getElementById(field).value.length;       }       }     </script> 

 

 

<form runat="server" id="writemsgtxt"><table width="100%" border="0" cellspacing="0" cellpadding="0">                      <tr>                        <td height="22" align="left">&nbsp;你還可以留言                          <input readonly type="text" id="remLen" runat="server" size="4" maxlength="3" value="500" class="input1" />                          字                        </td>                      </tr>                                                  <tr>                        <td align="left">                        <asp:TextBox ID="content" runat="server" CssClass="input2" Rows="8" Columns="50" TextMode="MultiLine" onkeyup="textCounter('content',500)"></asp:TextBox>                        </td>                      </tr></table></form>

转载于:https://www.cnblogs.com/VisualStudio/archive/2008/11/04/1326603.html

### Vue 中实现文本框字数限制并超出时变红 在 Vue.js 中可以利用 `v-model` 绑定数据到组件状态,并通过计算属性或者侦听器来监控输入框的内容长度。当内容超过设定的最大长度时,改变样式使提示信息变为红色。 对于 HTML 部分,定义一个具有唯一 ID 的 `<input>` 或者 `<textarea>` 元素用于接收用户的输入: ```html <div id="app"> <textarea v-model="message" @input="checkLength"></textarea> <p :style="{ color: textColor }">{{ remaining }} characters left</p> </div> ``` 接着,在 JavaScript (Vue) 方面初始化一个新的 Vue 实例并将逻辑封装进去: ```javascript new Vue({ el: '#app', data() { return { message: '', maxLen: 90, textColor: 'blue' } }, computed: { remaining() { let cArr = this.message.match(/([\u0391-\uffe5])/ig); const chineseCount = cArr === null ? 0 : cArr.length; const totalChars = this.message.length + chineseCount * 2; return Math.max(this.maxLen - totalChars, 0); } }, methods: { checkLength(event){ if (this.remaining >= 0) { this.textColor = 'blue'; } else { this.textColor = 'red'; } } } }); ``` 上述代码实现了监听文本框中的输入变化[^1],并通过调整 `textColor` 属性控制剩余字符计数的颜色显示。每当用户键入新内容时都会触发 `@input` 事件处理器 `checkLength()` 方法去更新颜色。 #### 关于正则表达式的说明 这里使用的正则 `/[\u0391-\uffe5]/ig` 是用来匹配所有的汉字以及部分特殊符号。如果只需要统计纯英文和其他 ASCII 字符,则不需要此过滤条件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值