- 浏览: 576106 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (411)
- webservice (3)
- oracle (37)
- sqlserver (8)
- j2ee (56)
- linux (7)
- javaweb (47)
- office (1)
- struts (23)
- hibernate (11)
- spring (29)
- 网络 (2)
- tomcat (13)
- tongweb (0)
- weblogic (0)
- powerdesiginer (3)
- svn (3)
- js (20)
- ie (2)
- 编译 (3)
- css (2)
- 操作系统 (5)
- Android (41)
- jbpm4.3 (1)
- fckeditor (3)
- 操作excel (2)
- db2常用命令 (1)
- ibatis (5)
- mysql (16)
- 表达式语言 (1)
- java方式调用存储过程 (1)
- ca (1)
- linux客户端 (1)
- 电子数码 (1)
- 行业应用 (12)
- 开发工具 (4)
- 面试 (1)
- 计算机原理 (1)
- NOSQL (5)
- 虚拟机 (1)
- nginx (0)
- velocity (2)
- jndi (1)
- spring mvc (39)
- springmvc (32)
- 安全 (5)
- htmleditor (6)
- iphone4 (1)
- html (4)
- jstl (2)
- ckeditor (5)
- 连接池 (1)
- jquery (6)
- 分页 (1)
- 技术研发规则 (1)
- javamail (1)
- maven (2)
- upload (1)
- log (1)
- 测试 (10)
- spring roo (1)
- 版本控制 (2)
- find bugs (0)
- jsf (0)
- springroo (0)
- 小道理 (1)
- 小道理,技术标准 (1)
- jsf (0)
- bitbao (2)
- redmine (3)
- 团队意识 (1)
- mybatis (2)
- jquery mobile (1)
- flexpaper (0)
- json (4)
- URLRewriteFilte (1)
- html5 (1)
- 都乐保活动 (0)
- openfire (0)
- TreeMap (1)
- build (0)
- javaweb,tag (0)
- algorithm (1)
- tag (2)
- 扯淡 (0)
- mac (2)
- 叶一火(老一) (1)
- 游玩 (1)
- 编码 (1)
- 上线部署 (0)
- 研发管理 (0)
- thumbnailator (2)
- 旅游 (0)
- bingweibo (1)
- 杂谈 (4)
- ktv (1)
- weibo (1)
- 爱情 (2)
- 饮食 (1)
- MediaWiki (1)
- git (1)
- 版本库 (1)
- servlet (1)
- 感悟 (1)
- 人生 (1)
- highcharts (1)
- poi (0)
- websphere (0)
- php (1)
最新评论
-
woshixushigang:
good
org.springframework.beans.TypeMismatchException: Failed to convert property valu -
nathanleewei:
org.springframework.jdbc.core.B ...
org.springframework.beans.TypeMismatchException: Failed to convert property valu -
浪禾木:
请问是ckeditor\contents.css吗?改过以后 ...
ckeditor自动换行问题 -
simusuishi:
刚哥威武!
ckeditor取值赋值问题 -
a455642158:
收割完毕……
Android开源项目源码下载(不断更新中)
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。
通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符):
<script language="#" type="text/ecmascript">
window.onload = function()
{
document.getElementById('txta1').onkeydown = function()
{
if(this.value.length >= 10)
event.returnValue = false;
}
}
</script>
它的原理是通过对keydown(键盘键位按下)事件对指定id号的文本区进行监测,可以想象,它只能限制键盘输入,如果用户通过鼠标右键粘贴剪切板中的文本,它无法控制字数。
通过键盘输入,以上文本区只能输入10个字。但是,我们的目的并没有达到!请随便复制一些文本,试着用鼠标右键粘贴,看看发生了什么。
你可以在网上找到类似上述的其他JS脚本,它们不管多么优秀,其原理都是一样的,通过对keydown、keyup或keypress之类的键盘键位操作事件来监控文本区的输入,无法防止鼠标右键的粘贴,为此,如果一定要真正地限制textarea的字数,我们还得为网页加另一把锁——禁用鼠标右键,这无疑得付出额外的开销,同时也可能是网页制作者不一定愿意做的。其实,还有一个更简单的方法,使用onpropertychange属性。
onpropertychange可以用来判断预定元素的value值,当元素的value值发生变化时判断事件就会被触发,仅关心被监测元素的value值,避开了输入的来源,从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴,可以在表单方框区代表中嵌套使用,以下是代码和效果样式,可以像上面那样测试输入,你会发现它真正达到目的:不管用什么方式输入,它只能输入100个字(汉字或其他小解符号):
代码:
<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>
当然,为了更为保险,处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测,如果字数超出预设的数量则进行相应处理,这样才达到真正限制字数的目的。(完)
另外一种方法实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
<script>
function check() {
var regC = /[^ -~]+/g;
var regE = /\D+/g;
var str = t1.value;
if (regC.test(str)){
t1.value = t1.value.substr(0,10);
}
if(regE.test(str)){
t1.value = t1.value.substr(0,20);
}
}
</script>
<textarea maxlength="10" id="t1" onkeyup="check();">
</textarea>
还有一种方式:
function textCounter(field, maxlimit) {
if (field.value.length > maxlimit){
field.value = field.value.substring(0, maxlimit);
}else{
document.upbook.remLen.value = maxlimit - field.value.length;
}
}
<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea>
剩余字数: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>
function LimitTextArea(field){
maxlimit=200;
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
}
<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>
title="The textarea width must less than 300 characters." 放在textarea 里面提示输入最大字节数。
例如:<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>
发表评论
-
eclipse codestyle和formate
2011-12-26 11:20 1056北京都乐宝软件信息技术公司的代码风格 -
Common-logging 与 Log4j的结合使用
2011-12-25 15:58 1203转自:http://hi.baidu.com/suofang/ ... -
ssh整合(转)
2011-09-06 14:50 1269终于,终于将SSH整合成 ... -
struts1学习体会
2011-08-27 22:25 883ZT:http://blog.csdn.net/toyouhe ... -
struts1例子
2011-08-27 22:16 1644最近一直再做struts2的项目,一年前做的struts1林业 ... -
struts异常处理机制
2011-08-22 23:11 1103在xwork中,package的定义中增加了global-ex ... -
struts.xml及default-action-ref详解
2011-08-22 17:54 2098我想实现访问一个acion时候,如果这个action不存在, ... -
struts1防止重复提交
2011-08-21 23:39 1053防止重复提交java解决 ( ... -
struts2防止重复提交
2011-08-08 14:42 1214本人负责全国林业行政执法人员管理系统,当时遇到了新增重复提交问 ... -
struts2的sruts-default.xml解释
2011-08-08 14:20 990这个文件是struts2框架默认加载的配置文件。它定义st ... -
struts.xml详解
2011-08-08 11:10 806<?xml version="1.0& ... -
Unable to find 'struts.multipart.saveDir' property setting.
2011-08-08 10:23 1608以前在项目中遇到Unable to find 'struts. ... -
struts2标签中限制文本域字数
2011-05-20 16:51 1590实现textarea限制输入字 ... -
struts2接收字符日期存到数据库
2011-05-18 10:54 1368模拟51job招聘网站出现的小插曲。 1、注册时候的信 ... -
struts2 JSON插件怪异的问题
2011-03-10 14:05 961private FenleiBizIntf fenleiBiz ... -
各种错误集锦(更新中。。。)
2011-03-01 21:32 937struts2中 根据一个条件查询表时候,如果数据库中没有此数 ... -
struts2的action中默认不会初始化属性,也不会实例化属性
2011-02-19 14:27 1617编写jdbc分页时易出现的马虎。 public St ... -
The Struts dispatcher cannot be found. This is usually caused by using Struts ta
2011-02-08 21:05 1210The Struts dispatcher canno ... -
STRUTS2返回类型
2010-12-26 01:40 816STRUTS2返回类型开始使用struts2的时候,想跳转到另 ... -
STRUTS2返回类型
2010-12-26 01:40 1040STRUTS2返回类型 开始使用struts2的时候,想跳转 ...
相关推荐
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过...
在设计用户界面时,对textarea的输入字数进行限制是常见的需求,它有助于保持数据的一致性和防止用户输入过长的文本。 首先,我们需要理解AngularJS的`ng-model`指令,它是Angular的核心特性之一,用于在HTML元素和...
本文将深入探讨如何实现对`textarea`文本长度的控制,并实时显示输入字数的统计。 首先,我们可以使用JavaScript来实现这一功能。JavaScript是一种广泛使用的客户端脚本语言,可以在用户与网页交互时执行,提供动态...
### Textarea限制输入文本长度的知识点 #### 一、前言 在Web开发过程中,为了提升用户体验并确保数据的有效性和安全性,对用户输入的数据进行适当的限制是非常必要的。特别是在表单填写场景下,如评论框、留言区等...
要限制textarea的输入字数,我们首先要获取textarea元素。在HTML中,我们可以创建一个textarea并为其设置一个ID,如`id="myTextarea"`。然后,我们可以在jQuery的选择器中使用这个ID来选择这个元素: ```html ...
在"效果超酷的textarea的输入字数限提示"这个压缩包中,可能就包含了实现这些效果的代码示例和CSS样式。 这个功能在许多实际场景中都非常有用,比如论坛发帖、在线留言、博客写作等。它不仅能够帮助用户避免输入...
通过上述代码示例可以看出,实现手机端textarea中输入字数监控的功能并不复杂,主要依赖于JavaScript对DOM事件的监听以及对CSS样式的动态修改。开发者需要注意的是,对于不同语言环境下的输入(尤其是东亚语言),...
总之,通过结合CSS的美化技巧和JavaScript的动态功能,我们可以创建一个既美观又实用的`textarea`输入字数限制提示,为用户带来愉快的使用体验。这只是一个基础示例,开发者可以根据项目需求进一步定制和优化,比如...
本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能,即对textarea输入框进行字数限制,并实时显示当前已输入的字符数,这对于创建表单、评论区或任何需要限制用户输入的场景非常...
本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改。当然,这个也不是很完美。 代码如下:<html> &...
总结起来,通过JavaScript我们可以轻松地实现对`<textarea>`的字数限制功能,包括监听输入事件、检查字符数、限制输入以及提供实时反馈。这样的功能对于优化用户界面和提高网站质量具有重要意义。通过结合源码和工具...
检测并限制输入字数 在事件处理函数中,可以通过`val()`方法获取当前`textarea`的值,并使用`length`属性获取字符串长度。如果当前长度超过预设的最大值(如100),则截断字符串并重新设置`textarea`的值,同时弹出...
jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步。 <!DOCTYPE html> <html lang="en"> <head> <meta ...
本文将详细介绍如何实现一个兼容iOS和安卓设备的`<textarea>`输入字数限制实例。 首先,我们要明确`<textarea>`是HTML中用于创建多行文本输入的元素,通常用于收集用户的大段文字输入,如评论、反馈或表单中的长...
大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例。 实例代码如下 <!DOCTYPE html> <html> <head> <meta ...
通过jQuery或其他JavaScript库,可以实现更多高级功能,如自动完成、字数统计、自动调整高度等。例如,使用jQuery插件`autosize`可以自动调整`textarea`的高度以适应内容: ```javascript $('textarea').autosize()...