请问怎样控制输入字数

dandande 2010-03-01 11:53:31

往textarea中输入时，用onkeyup可以控制键盘输入字数，可onkeyup对粘贴不管用，粘贴的数字应该怎样控制？谢谢！

...全文

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

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

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"/>
最小-５,最大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"/>

最小-５,最大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

打赏
举报

http://topic.csdn.net/u/20070129/11/E3A25262-FF8D-447C-AC97-117E481D17CE.html
参考一下吧，ff我还没用过

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

打赏
举报

提交的时候用正则去验证

sohighthesky 2010-03-01

打赏
举报

看看这个http://topic.csdn.net/u/20100107/10/2d019f0b-bd6a-4c83-aab0-6ed9856f3777.html

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）

输入框控制输入字数超出不让输入并提示