郁闷：javascript动态显示textarea中输入的字符长度，超过制定长度要拦截住

i_need_mana 2007-05-11 08:45:36

动态显示textarea中输入的字符长度，超过制定长度要提示，
关键是要阻止新输入的内容，特别是粘贴的字符。
谢谢

...全文

1846 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

Kong Kong 2011-07-08

打赏
举报

[Quote=引用 20 楼 joegu 的回复:]
<input name= " " type= "text " maxlength= "5 "> 你让它是多少就是多少，多了也写不进。
搞定
[/Quote] 见过SB的，没见过这么SB的。。。

joegu 2007-05-22

打赏
举报

<input name="" type="text" maxlength="5">你让它是多少就是多少，多了也写不进。
搞定

sywj115447 2007-05-22

打赏
举报

你可以去看看创力的留言系统

应该跟你的要求很相付

他那个系统，限制是500字符，跟手机短信类似，输入一个字就会相应的有一个数字显示

安迪 2007-05-22

打赏
举报

那你说用户在你原来的文本内容中间输入新内容的话，也要找出来哪些是用户输入的？

yifuzhiming 2007-05-22

打赏
举报

学习

i_need_mana 2007-05-22

打赏
举报

还是没能解决，up

szsheng 2007-05-17

打赏
举报

<textarea cols="100" rows="5" id="text" length="500"></textarea>
注意到了吗?页面中所有的 textarea 或 input 都可以加上 length属性,此例就是限制为500字的,当然了对粘贴也有用的(如果想超过的字符提示,在PressLength方法中加入相关代码)
具体使用如下:

加入前边如下javascript代码

function limitPaste(object,length)
{
length *= 2;
var tempLength = 0;
if(document.selection)
{
if(document.selection.createRange().parentElement().id == object.id)
{
tempLength = document.selection.createRange().text.len();
}
}
var tempValue = window.clipboardData.getData("Text");
tempLength = object.value.len() + tempValue.len() - tempLength;

if (tempLength > length)
{
tempLength -= length;
var tt="";
for(var i=0;i<tempValue.len()-tempLength;i++)
{
if(tt.len()<(tempValue.len()-tempLength))
tt=tempValue.substr(0,i+1);
else
break;
}
if(tt.len()<=0)
{
window.event.returnValue=false;

}
else
{
tempValue=tt;
window.clipboardData.setData("Text", tempValue);
window.event.returnValue = true;
}
}

}

function PressLength()
{
if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
{
if(event.srcElement.length!=null)
setMaxLength(event.srcElement,event.srcElement.length);

}
}

function LimitLength()
{

if(event.srcElement.type=="text" || event.srcElement.type=="textarea" )
{
if(event.srcElement.length!=null)
limitPaste(event.srcElement,event.srcElement.length);
}
}

document.documentElement.attachEvent('onkeyup', PressLength);
document.documentElement.attachEvent('onpaste', LimitLength);

JK_10000 2007-05-17

打赏
举报

一个汉字算两个字符
---
改数据库就没必要一个汉字算两个字符：
sqlserver:varchar-->> nvarchar
oracle: varchar2--->> nvarchar2

chouchy 2007-05-17

打赏
举报

<textarea cols="100" rows="5" id="text" onkeyup="limitInput()"></textarea><span id="tip"></span>
<script language="JavaScript">

</script>

JK_10000 2007-05-17

打赏
举报

Only for IE:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New Page 1</title>
</head>

<body>
<textarea maxLength="100" id=aaa style="width:500;height:300;" onbeforedeactivate="return checkMaxLength(this);" >
fds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fd
</textarea>
<input type=button value="test before submit" onclick=" return checkMaxLength(document.getElementById('aaa'))">
</body>

</html>
<script>
/**
*checkMaxLength.
*JK 2006-11-26
*/
function checkMaxLength(textareaObj,maxLength)
{
if(maxLength == null) maxLength=textareaObj.getAttribute("maxLength");
if(maxLength == null) maxLength=1024;
var currentLength = textareaObj.value.length;
if (currentLength > maxLength) {
alert("The length of your input ("+currentLength+") is larger than the maxLength ("+maxLength+") .");
if(textareaObj.createTextRange){
var textRange=textareaObj.createTextRange();
textRange.moveStart('character',maxLength);
textRange.select();
}
else textareaObj.select();
textareaObj.focus();
return false;
}
return true;
}

</script>

JK_10000 2007-05-17

打赏
举报

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New Page 1</title>
</head>

<body>
<textarea maxLength="100" id=aaa style="width:500;height:300;">
fds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fdfds afdsa fdsa fdsa fdsa fd
</textarea>
<input type=button value="test before submit" onclick=" return checkMaxLength(document.getElementById('aaa'))">
</body>

</html>
<script>
/**
*checkMaxLength.
*JK 2006-11-26
*/
function checkMaxLength(textareaObj,maxLength)
{
if(maxLength == null) maxLength=textareaObj.getAttribute("maxLength");
if(maxLength == null) maxLength=1024;
var currentLength = textareaObj.value.length;
if (currentLength > maxLength) {
alert("The length of your input ("+currentLength+") is larger than the maxLength ("+maxLength+") .");
if(textareaObj.createTextRange){
var textRange=textareaObj.createTextRange();
textRange.moveStart('character',maxLength);
textRange.select();
}
else textareaObj.select();
textareaObj.focus();
return false;
}
return true;
}

</script>

hy_lihuan 2007-05-17

打赏
举报

3。不能只截取前端字符，因为用户有可能是在原文本的前面输入。
不知道什么意思;前面两个可以实现的

i_need_mana 2007-05-17

打赏
举报

这个问题不会是无解吧！
up

Ischema 2007-05-12

打赏
举报

oEvent.preventDefault()适用firefox;
onPropertyChang只适用IE;
onkeypress不能实现完全实时监控！
这个问题讨论过好多次了，像楼主这样更高的即时监控的要求似乎很难实现，
只有在提交后检测！

hhhhhnnnnn66 2007-05-12

打赏
举报

onkeypress事件不是可以吗
产生一个字符，计算一次文本域的长度，当超过长度的时候,IE用return(false)阻止onkeypress就可以，firefox用oEvent.preventDefault()就可以

wangwei0406 2007-05-12

打赏
举报

可不可以这样写，一开始显示可以输入的最大字符数，每当用户输入一个字符，显示可以输入的字符数就减1，这个数字到0了就不可以输入了，这样写可用性会好一点，用户一开始就知道可以输入多少个字符，也不用写多余的提示信息了。参考下面的代码：
function textCounter(field, countfield, maxlimit) {
// 定义函数，传入3个参数，分别为表单区的名字，表单域元素名，字符限制；
if (field.value.length > maxlimit) {
//如果元素区字符数大于最大字符数，按照最大字符数截断；
field.value = field.value.substring(0, maxlimit);
}else{
//在记数区文本框内显示剩余的字符数；
countfield.value = maxlimit - field.value.length;
}
//contentsample.innerHTML = field.value;
}

i_need_mana 2007-05-12