`
woshixushigang
  • 浏览: 578331 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

struts2标签中限制文本域字数

阅读更多

实现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>

 

分享到:
评论

相关推荐

    Struts2标签中文文档(html和chm格式)

    在Struts2框架中,标签库是其核心特性之一,它提供了丰富的UI组件和控制逻辑,使得开发者可以更加便捷地进行页面渲染和交互处理。本文将深入探讨Struts2标签的中文文档,以及如何利用这些文档进行有效开发。 首先,...

    Struts2实例 国际化 类型转换 struts标签

    在Struts2中,这通常通过资源 bundle 文件实现,例如`messages.properties`和`messages_zh_CN.properties`,分别用于存储默认语言和中文语言的文本。在Action或者JSP页面中,可以通过`&lt;s:text&gt;`标签来引用这些资源,...

    struts2标签使用例子

    在Struts2框架中,标签库是其一大特色,它提供了丰富的自定义标签,使得开发者能够更加便捷地创建动态页面。这些标签极大地简化了JSP页面的编写,提高了代码的可读性和可维护性。 1. **Struts2核心标签库**: - `s...

    struts2标签库例子

    Struts2 标签库详解 Struts2 提供了一个强大的标签库,用于简化 Web 应用程序的开发过程。这些标签可以分为两类:通用标签和 UI 标签。下面,我们将详细介绍 Struts2 标签库的使用。 4.1 通用标签 通用标签用来...

    struts2标签库struts2标签库struts2标签库

    Struts2标签库是Struts2框架中的一个重要组件,它提供了一系列的标签,帮助开发者快速构建Web应用程序。在Struts2标签库中,标签可以分为UI标签和非UI标签两大类。UI标签用于生成HTML控件,如文本框、列表框、复选框...

    使用Struts 2标签的注意事项

    &lt;filter-class&gt;org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter &lt;filter-name&gt;struts2 &lt;url-pattern&gt;/* ``` 这段代码定义了Struts 2的核心Filter,并将其映射到所有的请求上。 其次...

    Struts2标签集锦(附Struts2标签详解word文档)

    在Struts2框架中,标签库是一系列预定义的JSP标签,它们提供了丰富的功能,如数据绑定、控制流、输入验证等,帮助开发者创建更加整洁、易于维护的代码。 Struts2标签库主要分为以下几个部分: 1. **核心标签(Core...

    Struts2标签使用及API文档

    在Struts2框架中,标签库是其重要组成部分,它提供了丰富的标签来帮助开发者更方便地构建用户界面。下面我们将深入探讨Struts2标签的使用及其API文档。 1. **Struts2标签的分类与功能** - **控制标签**:如`s:if`,...

    struts2标签使用方法

    在Struts2中,标签库是其核心特性之一,它提供了一系列预定义的JSP标签,用于简化视图层的编码,提高代码的可读性和可维护性。下面我们将详细探讨Struts2标签的使用方法以及EL(Expression Language)表达式。 1. *...

    在Eclipse中配置Struts2项目(html)手把手教会你 +struts2 标签库介绍(html) + STRUTS2学习文档.pdf + Struts2―表单验证validate(html) + struts2和struts的比较 + struts教程(html)

    在Eclipse中配置Struts2项目(html)手把手教会你 如何在Eclipse中配置Struts2。 struts2 标签库介绍(html)对Struts2的标签做了详细的介绍让你轻松掌握Struts2的标签。 STRUTS2学习文档.pdf 对Struts2的一些配置...

    struts2标签.chm

    自制的struts2标签chm格式,可以方便快速查询查看

    软件开发框架Struts2标签库.pdf

    * textarea 标签:用于构建文本域。 * select 标签:用于构建下拉菜单。 * radio 标签:用于构建单选按钮。 * checkbox 标签:用于构建复选框。 本资源摘要信息涵盖了Struts 2 标签库的概述、控制标签、数据标签和...

    Struts2标签中文参考手册

    Struts2标签中文参考手册帮助文档,方便网友们学习用

    struts2API+struts2标签库(中文带例子)

    API是Application Programming Interface的缩写,是Struts2框架的核心组件,而标签库则是Struts2提供的一种简化JSP页面开发的机制。 Struts2 API包含了一系列的类和接口,它们定义了框架的主要功能。其中,Action类...

    struts2 标签 API 中文版

    struts2 标签 API 中文版的,然后编译生成chm格式的,方便查看。

Global site tag (gtag.js) - Google Analytics