请问怎样控制输入字数

dandande 2010-03-01 11:53:31
往textarea中输入时,用onkeyup可以控制键盘输入字数,可onkeyup对粘贴不管用,粘贴的数字应该怎样控制?谢谢!
...全文
309 21 打赏 收藏 举报
写回复
21 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
dandande 2010-03-09
  • 打赏
  • 举报
回复
谢谢上面各位,这几天有事,没及时结帖,15楼的代码以后有时间一定好好钻研一下,最后我采用的方案是:
<script>
function len_over(){
txt=document.getElementById("txt")
if(txt.value.length>10){
alert("it is too long!");
form1.submit.disabled=true;
}}
</script>
<form id=form1>
<textarea id=txt name=txt rows=5 cols=60 onfocus={form1.submit.disabled=false;}>
<input type=submit name=submit value=submit onclick=len_over()>
</form>


这个在ie上很好用,给了提示,按钮灰了,也不离开原页面,txt中的东西还在,
在ff上,转到了action指定的页面,尽管数据没被处理,也可以再转回来,但毕竟要多几行代码,给人感觉不好,
再次谢谢大家,有好的办法请告诉我,谢谢!

bzm 2010-03-03
  • 打赏
  • 举报
回复
引用 15 楼 bzm 的回复:
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>无标题文档</title><scriptlanguage="javascript">function inputNumberSet(oIpt, nMin, nMax)
{
oIpt.oldNum= Number(oIpt.value);if(typeof(nMin)=="number")oIpt.nMin= nMin;if(typeof(nMax)=="number")oIpt.nMax= nMax;

oIpt.onkeydown= inputNumKeyDown;
oIpt.onmousewheel= inputNumWheel;
oIpt.onkeyup= inputNumKeyUp;
oIpt.numLimit= inputNumLimit;
}function inputNumKeyDown(evt)
{var nKeyCode;if(typeof(event)=="undefined")
nKeyCode= evt.keyCodeelse
nKeyCode= event.keyCode;if(nKeyCode==38)
{this.oldNum++;this.value=this.oldNum;
}if(nKeyCode==40)
{this.oldNum--;this.value=this.oldNum;
}this.numLimit();if((nKeyCode==13)&&typeof(this.fFun)=="function")this.fFun(this);
}function inputNumWheel(evt)
{if(typeof(event)=="object")
{if(event.wheelDelta>0)
{this.oldNum++;this.value=this.oldNum;
}if(event.wheelDelta<0)
{this.oldNum--;this.value=this.oldNum;
}this.numLimit()
}
}function inputNumLimit()
{if((typeof(this.nMin)=="number")&&(this.oldNum<this.nMin))
{this.oldNum=this.nMin;this.value=this.nMin;
}else
{if((typeof(this.nMax)=="number")&&(this.oldNum>this.nMax))
{this.oldNum=this.nMax;this.value=this.nMax;
}
}if(typeof(this.onchange)=="function")this.onchange();
}function inputNumKeyUp(evt)
{if(this.value.length==0)
{if((typeof(this.nMin)=="number")&&(this.nMin>0))
{this.value=this.nMin;this.oldNum=this.nMin;
}else
{this.value=0;this.oldNum=0;
}
}else
{var nNewNum= Number(this.value);if(String(nNewNum)!="NaN")
{this.oldNum= nNewNum;
}else
{this.value=this.oldNum;
}
}this.numLimit();
}function myLoad()
{
inputNumberSet(document.getElementById("myInput"),-5,500)
}</script></head><bodyonload="myLoad()"><p><inputtype="text" name="myInput" id="myInput"/>
最小-5,最大500。键盘上下可设置。滚轮IE、Chrome等支持</p><p> </p><p>inputNumberSet(oIpt, nMin, nMax)<br/>
oIpt:输入框<br/>
nMin:最小值<br/>
nMax:最大值</p></body></html>

保存为HTML看看


LZ,你可以试试我这个啊。我在IE,FireFox, Chrome, Opera, Safari上都有测试过啊
newlogic 2010-03-02
  • 打赏
  • 举报
回复
文本框失去焦点时用正则表达式验证最简单了。。。。
bzm 2010-03-02
  • 打赏
  • 举报
回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="javascript">
function inputNumberSet(oIpt, nMin, nMax)
{
oIpt.oldNum = Number(oIpt.value);
if(typeof(nMin)=="number")oIpt.nMin = nMin;
if(typeof(nMax)=="number")oIpt.nMax = nMax;

oIpt.onkeydown = inputNumKeyDown;
oIpt.onmousewheel = inputNumWheel;
oIpt.onkeyup = inputNumKeyUp;
oIpt.numLimit = inputNumLimit;
}

function inputNumKeyDown(evt)
{
var nKeyCode;
if(typeof(event)=="undefined")
nKeyCode = evt.keyCode
else
nKeyCode = event.keyCode;
if(nKeyCode==38)
{
this.oldNum ++;
this.value = this.oldNum;
}
if(nKeyCode==40)
{
this.oldNum --;
this.value = this.oldNum;
}
this.numLimit();
if((nKeyCode==13)&&typeof(this.fFun)=="function")this.fFun(this);
}

function inputNumWheel(evt)
{
if(typeof(event)=="object")
{
if(event.wheelDelta > 0)
{
this.oldNum ++;
this.value = this.oldNum;
}
if(event.wheelDelta < 0)
{
this.oldNum --;
this.value = this.oldNum;
}
this.numLimit()
}
}

function inputNumLimit()
{
if((typeof(this.nMin)=="number")&&(this.oldNum<this.nMin))
{
this.oldNum = this.nMin;
this.value = this.nMin;
}
else
{
if((typeof(this.nMax)=="number")&&(this.oldNum>this.nMax))
{
this.oldNum = this.nMax;
this.value = this.nMax;
}
}
if(typeof(this.onchange)=="function")this.onchange();
}

function inputNumKeyUp(evt)
{
if(this.value.length == 0)
{
if((typeof(this.nMin)=="number")&&(this.nMin>0))
{
this.value = this.nMin;
this.oldNum = this.nMin;
}
else
{
this.value = 0;
this.oldNum = 0;
}
}
else
{
var nNewNum = Number(this.value);
if(String(nNewNum) != "NaN")
{
this.oldNum = nNewNum;
}
else
{
this.value = this.oldNum;
}
}
this.numLimit();
}

function myLoad()
{
inputNumberSet(document.getElementById("myInput"), -5, 500)
}
</script>
</head>

<body onload="myLoad()">
<p>
<input type="text" name="myInput" id="myInput"/>
最小-5,最大500。键盘上下可设置。滚轮IE、Chrome等支持</p>
<p> </p>
<p>inputNumberSet(oIpt, nMin, nMax)<br />
oIpt:输入框<br />
nMin:最小值<br />
nMax:最大值</p>
</body>
</html>


保存为HTML看看
KK3K2005 2010-03-02
  • 打赏
  • 举报
回复
引用 17 楼 dandande 的回复:
谢谢上面各位,特别要谢谢shan1119,
可能是我没表达清楚,我要的效果是当字符超过一定数量时,让按钮变灰,使得表单无法提交,
下面是按照13楼的代码写的,这个在ie上好使,可在ff上不行,请大家想想办法,怎样才能在ff上也好使,谢谢!

你早说就更简单了 onchange事件中判断下 长度就可以了
fuyou001 2010-03-02
  • 打赏
  • 举报
回复
引用楼主 dandande 的回复:
往textarea中输入时,用onkeyup可以控制键盘输入字数,可onkeyup对粘贴不管用,粘贴的数字应该怎样控制?谢谢!

<textarea id=txt name=txt rows='5' cols='60' >txt</textarea>
document.getElementById("txt").onkeyup=document.getElementById("txt").onchange=function(){
//== 函数
}
shan1119 2010-03-02
  • 打赏
  • 举报
回复
<script type="text/javascript">
window.onload = function() {
document.getElementById("txt").onbeforepaste = function(){
var obj=clipboardData.getData("Text");
if(this.value.length+obj.length>10){
this.value=(this.value+obj).substring(0,10);
clipboardData.setData("Text","");//clear clipboarddata
}
}
}
</script>
<textarea id=txt name=txt rows='5' cols='60' >txt</textarea>
shan1119 2010-03-02
  • 打赏
  • 举报
回复
dandande 2010-03-02
  • 打赏
  • 举报
回复
谢谢上面各位,特别要谢谢shan1119,
可能是我没表达清楚,我要的效果是当字符超过一定数量时,让按钮变灰,使得表单无法提交,
下面是按照13楼的代码写的,这个在ie上好使,可在ff上不行,请大家想想办法,怎样才能在ff上也好使,谢谢!
<script type="text/javascript"> 
window.onload = function() {
document.getElementById("txt").onpaste = function(){
var obj=clipboardData.getData("Text");
if(this.value.length+obj.length>10){
alert("Your question is too long!");
form1.submit.disabled=true
} } }
</script>
<form id=form1>
<textarea id=txt name=txt rows='5' cols='60' >txt</textarea>
<input type=submit name=submit value=submit>
</form>
shan1119 2010-03-01
  • 打赏
  • 举报
回复
window.onload = function() {
document.getElementById("tField").onpaste = function(){
if(this.value.length>10)this.value="...";
}
草根醉秋意 2010-03-01
  • 打赏
  • 举报
回复
提交的时候用正则去验证
Alien 2010-03-01
  • 打赏
  • 举报
回复
引用 8 楼 shan1119 的回复:
have a try
HTML code<scripttype="text/javascript">
window.onload=function() {
document.getElementById("tField").onbeforepaste=function(){var obj=clipboardData.getData("Text");if(this.value.length+obj.length>10)this.value="...";
}
}</script><inputtype="text" value="show"id="tField">

正解
dandande 2010-03-01
  • 打赏
  • 举报
回复
<script type="text/javascript"> 
window.onload = function() {
document.getElementById("txt").onbeforepaste = function(){
var obj=clipboardData.getData("Text");
if(this.value.length+obj.length>10){
alert(this.value.length);
alert(obj.length);
alert('it is too long');
}}}
</script>
<textarea id=txt name=txt rows='5' cols='60' >txt</textarea>
shan1119 2010-03-01
  • 打赏
  • 举报
回复
引用 9 楼 dandande 的回复:
谢谢8楼,
只是它要叫两次,为什么?怎样让它只叫一次?
if(this.value.length+obj.length>10){
alert('it is too long');
}

把你写的贴出来看看吧。
dandande 2010-03-01
  • 打赏
  • 举报
回复
谢谢8楼,
只是它要叫两次,为什么?怎样让它只叫一次?
if(this.value.length+obj.length>10){
alert('it is too long');
}
shan1119 2010-03-01
  • 打赏
  • 举报
回复
have a try

<script type="text/javascript">
window.onload = function() {
document.getElementById("tField").onbeforepaste = function(){
var obj=clipboardData.getData("Text");
if(this.value.length+obj.length>10)this.value="...";
}
}
</script>
<input type="text" value="show"id="tField">
lchy110 2010-03-01
  • 打赏
  • 举报
回复
来个绝的 呵呵 你把输入框的粘贴功能给屏蔽掉 哈哈
dandande 2010-03-01
  • 打赏
  • 举报
回复
谢谢上面各位,
1楼的我看不懂,能否给个例子?
3楼的我这里要第二次贴才有效,首次粘贴没有效,可能是什么原因?
evilpaw 2010-03-01
  • 打赏
  • 举报
回复
function LessThan(oTextArea){
//返回文本框字符个数是否符号要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
</script>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea>
加载更多回复(1)
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-03-01 11:53
社区公告
暂无公告