textarea中限制输入字符长度(实用版)

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>

时间: 2024-11-01 11:29:46

textarea中限制输入字符长度(实用版)的相关文章

利用正则表达式来设置最大输入字符长度

        在做机房合作的时候,很多东西都进行了"改革",听二牛说输入的字符长度限制可以用正则表达式,当然限制字符长度不仅可以用这种方法来写,还有通过设置文本框属性等办法来解决.不过利用正则表达式,我还是没没想到.反正正则表达式都学过了,为什么不能拿过来用呢?让它和我原来的方法比试比试. 一.ascii码小试 之前的代码是利用ascii码来编写的: '限制输入的字符长度为0-16之间 Private Sub txtcardno_LostFocus() If Not Len(txtc

jQuery实现限制input框 textarea文本框输入字符数量的方法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery实现限制input框 textarea文本框输入字符数量的方法</title> </head> <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>&l

c++中关于输入字符数组的一些问题

一.scanf对字符串.字符数组的输入有%c和%s两种方式 1.%c用来输入单个字符,它能够识别空格和换行符并将其保存到字符数组中. 2.%s用来输入一个字符串,它通过空格和换行来识别一个字符串的结束,也就是说用它输入到字符数组的字符串是没有空格的. 二.getchar() 用来输入单个字符 1.他可以识别换行符和空格,并将其保存. 三.gets输入.puts输出 1.gets用来输入一行字符串并将其存放到一维数组或者二维数组的一维中,读取字符串直到换行符,但是换行符会被丢弃,并且再在末尾添加'

jquery限制文本框输入字符长度

js代码: jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && inputType == "text" || inputType == "

JS对文本框输入字符的限制

文本框Text或TestBox中对输入字符的限制,通过js事件来监控用户输入字符.然而,如果用户是通过Copy的方式来粘贴到文本中来,那这时候文本框的字符长度有可能超过,这时候就容易报错.这种Copy的方法也可以通过js的时间来监控.这样一来就需要些2个js时间来监控用户输入或Copy的事件了. 其实文本框有一个事件,可以做到这一步,我们设定的文本框的字符长度为500时,如果用户输入或Copy超过500,文本框只会取500的长度. <asp:textbox id="txtTest"

python3 tkinter 获取输入字符串长度

python 3  获取输入字符长度 #-*- coding:utf-8 -*- from tkinter import * from tkinter import messagebox def get_Tk(): top = Tk() return top #定义获取字符长度函数 def sum_test(baseNum): return len(baseNum) def show_result(top,re_sum): #这里使用Toplevel(top) 是为了新开一个窗口 ,且显示计算结

js判断输入字符串长度(汉字算两个字符,字母数字算一个):例如 要求输入12的字,24个字节

<html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie7 .pbt .ftid a { margin-top: 1px; } .cl:after { clear: both; content: ".&quo

android 中如何限制 EditText 最大输入字符数

方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:android:maxLength="10" 即限制最大输入字符个数为10 方法二: 在代码中使用InputFilter 进行过滤 //editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(20)}); 即限定最大输入字符数为20 [java] view plaincopy public class TextEditActivity exten

JavaScript表单验证,输入中文时字符长度为2

获取输入框中的字符长度进行表单验证,当输入英文时字符长度就是1,当输入中文时字符长度为2. 字符数为4~16位, 上图: 一个中文抵两英文. 上代码 1 btn.addEventListener('click',ov,false); 2 3 function ov(){ 4 var inputValue = text.value.trim(); 5 //去掉最前最后的空格 6 if (countLength(inputValue) < 4 || countLength(inputValue) >