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

实现textarea限制输入字数

阅读更多

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

 

分享到:
评论

相关推荐

    js实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过...

    angularjs实现textarea文本输入字数限制功能

    在设计用户界面时,对textarea的输入字数进行限制是常见的需求,它有助于保持数据的一致性和防止用户输入过长的文本。 首先,我们需要理解AngularJS的`ng-model`指令,它是Angular的核心特性之一,用于在HTML元素和...

    控制textarea文本长度,并限制输入字数(带统计显示)

    本文将深入探讨如何实现对`textarea`文本长度的控制,并实时显示输入字数的统计。 首先,我们可以使用JavaScript来实现这一功能。JavaScript是一种广泛使用的客户端脚本语言,可以在用户与网页交互时执行,提供动态...

    Textarea限制输入文本长度

    ### Textarea限制输入文本长度的知识点 #### 一、前言 在Web开发过程中,为了提升用户体验并确保数据的有效性和安全性,对用户输入的数据进行适当的限制是非常必要的。特别是在表单填写场景下,如评论框、留言区等...

    jQuery textarea文本框输入文字字数限制提示代码

    要限制textarea的输入字数,我们首先要获取textarea元素。在HTML中,我们可以创建一个textarea并为其设置一个ID,如`id="myTextarea"`。然后,我们可以在jQuery的选择器中使用这个ID来选择这个元素: ```html ...

    效果超酷的textarea的输入字数限提示.rar

    在"效果超酷的textarea的输入字数限提示"这个压缩包中,可能就包含了实现这些效果的代码示例和CSS样式。 这个功能在许多实际场景中都非常有用,比如论坛发帖、在线留言、博客写作等。它不仅能够帮助用户避免输入...

    手机端textarea中输入字数监控

    通过上述代码示例可以看出,实现手机端textarea中输入字数监控的功能并不复杂,主要依赖于JavaScript对DOM事件的监听以及对CSS样式的动态修改。开发者需要注意的是,对于不同语言环境下的输入(尤其是东亚语言),...

    效果超酷的textarea的输入字数限提示

    总之,通过结合CSS的美化技巧和JavaScript的动态功能,我们可以创建一个既美观又实用的`textarea`输入字数限制提示,为用户带来愉快的使用体验。这只是一个基础示例,开发者可以根据项目需求进一步定制和优化,比如...

    jQuery textarea文本框输入文字字数限制提示代码.zip

    本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能,即对textarea输入框进行字数限制,并实时显示当前已输入的字符数,这对于创建表单、评论区或任何需要限制用户输入的场景非常...

    jquery实现textarea输入框限制字数的方法

    本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改。当然,这个也不是很完美。 代码如下:&lt;html&gt; &...

    使用JavaScript限制TextArea多行文本域的可输入字数

    总结起来,通过JavaScript我们可以轻松地实现对`&lt;textarea&gt;`的字数限制功能,包括监听输入事件、检查字符数、限制输入以及提供实时反馈。这样的功能对于优化用户界面和提高网站质量具有重要意义。通过结合源码和工具...

    JQuery实现textarea可以有字数录入提醒功能

    检测并限制输入字数 在事件处理函数中,可以通过`val()`方法获取当前`textarea`的值,并使用`length`属性获取字符串长度。如果当前长度超过预设的最大值(如100),则截断字符串并重新设置`textarea`的值,同时弹出...

    jquery实现限制textarea输入字数的方法

    jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...

    Textarea输入字数限制实例(兼容iOS&安卓)

    本文将详细介绍如何实现一个兼容iOS和安卓设备的`&lt;textarea&gt;`输入字数限制实例。 首先,我们要明确`&lt;textarea&gt;`是HTML中用于创建多行文本输入的元素,通常用于收集用户的大段文字输入,如评论、反馈或表单中的长...

    利用Angular.js限制textarea输入的字数

    大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例。 实例代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    textarea剩余字数

    通过jQuery或其他JavaScript库,可以实现更多高级功能,如自动完成、字数统计、自动调整高度等。例如,使用jQuery插件`autosize`可以自动调整`textarea`的高度以适应内容: ```javascript $('textarea').autosize()...

Global site tag (gtag.js) - Google Analytics