限制Textarea文本域内容的长度

通过charCodeAt()函数获取字符的Unicode值，根据Unicode值得范围判断字符串中是否包含中文符，包含temp+2，不包含temp+1；
在body标签的onload加载事件中调用JavaScript中的函数，并在<textarea>的onkeyup事件和onkeydown事件中调用JavaScript中的函数，实时跟踪用户输入的内容长度，在文本域之后显示；

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>限制Textarea文本域内容的长度</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script language="javascript">  function limitTextarea(){var max=20;//最多可输入20个字符，中文占2个字节 var areaStr = document.getElementById("str").value;var temp=0;for(var i=0;i<areaStr.length;i++){     //可能包含中文，需要循环判断 var code = areaStr.charCodeAt(i);   //转换为Unicode值 if(code>255){                      //大于255的为中文字符temp=temp+2;}else{temp=temp+1;}if(temp>max){                        //如果字符长度超过指定长度，跳出循环 break;}} document.getElementById("str").value=areaStr.substring(0,i);document.getElementById("now_len").innerHTML = temp;//当前输入的字符长度document.getElementById("remainder_len").innerHTML = max-temp;//剩余字符长度  }</script><style type="text/css">table{font-size: 13px;font-family: 楷体;color:navy;}input{font-size: 13px;font-family: 楷体;color:navy;}font{font-size: 12px;font-family: 楷体;color:orangered;}.style1{width: 500px;height: 160px;}</style></head><body "limitTextarea()" ><fieldset class="style1"><legend>留言薄</legend><form action="" id="myform"><table align="center"><tr><td>留言内容： <font>最多可输入20个字符。</font></td></tr>  <tr><td><textarea name="s1" rows="5" cols="40" id="str"  "limitTextarea()" "limitTextarea()"></textarea></td></tr><tr><td align="right"><font>当前字数：<span  id="now_len"  /></span>&nbsp;&nbsp;剩余字数：<span id="remainder_len" ></span></font></td></tr>  <tr><td ><input type="button" value="留 言" ></td></tr></table></form></fieldset></body>
</html>

限制Textarea文本域内容的长度相关推荐

表单标签——input表单元素、select下拉表单元素和textarea文本域
表单标签表单的目的是为了收集用户信息.在网页中,我们也要跟用户进行交互,收集用户资料,此时就需要表单. 表单的组成:在HTML中,一个完整的表单通常由表单域.表单控件(也称为表单元素)和提示信息三部 ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
php设置文本框高度,怎样让textarea文本域宽度和高度width及height自动适应
这次给大家带来怎样让textarea文本域宽度和高度width及height自动适应,让textarea文本域宽度和高度width及height自动适应的注意事项有哪些,下面就是实战案例,一起来看一下 ...
【多个IP地址用逗号分割开】vue简单实现，textarea文本域输入多个ip地址用逗号分隔开，根据空格分割
前言这个功能也是很多地方会用到的. 一般使用的地方是比如需要设置白名单或者黑名单然后页面上会有一个textarea文本域. 在文本域中输入多个ip地址,输入一个回车换一行. 然后点击保存后,把数据 ...
关于模拟文本域iview textarea文本域:autosize=quot;{minRows: 3,maxRows: 7}quot;这个属性的好处
具体写法:<Input v-model="value" type="textarea" :autosize="{minRows: 3,maxRo ...
解决部分浏览器不能显示itext生成的PDF文件文本域内容问题
解决部分浏览器不能显示itext生成的PDF文件文本域内容问题参考文章: (1)解决部分浏览器不能显示itext生成的PDF文件文本域内容问题 (2)https://www.cnblogs.com/ ...
限制textarea文本域中输入字符个数（防粘贴）
通常我们需要对用户文本输入进行字符数量上的限制,对于<input type="text" value="" />文本输入域,我们可以通过maxlen ...
html textarea文本域高度自适应
1.可直接在菜鸟教程网站测试页面中测试 <!DOCTYPE html> <html> <head><meta charset="utf-8&quo ...
自适应textarea文本域高度原理
自适应文本域高度原理.什么是自适应文本域高度?可能名字叫的不是很容易理解,这里解释下,就是一个文本域输入框的高度会跟随内容高度变化而刚好就是文本高度.这就是自适应文本域高度文本域的标签通常就是 te ...

限制Textarea文本域内容的长度

限制Textarea文本域内容的长度相关推荐

最新文章

热门文章