注册 | 登录 忘记密码? 51cto首页 | 博客 | 论坛 | 招聘
热点文章 IB客座主编(四)美国西蒙公..
 帮助

控制textarea可输入字符的长度


2006-12-08 17:05:27
 标签:   [推送到技术圈]

给textarea增加maxlength属性
<textarea cols="30" maxlength="10"></textarea>
<script language="javascript">
var x = document.getElementsByTagName('textarea');
for (var i=0;i<x.length;i++)
{
 if (x[i].getAttribute('maxlength')){
  x[i].onkeypress = doKeyPress;
  x[i].onkeydown = doKeyDown;
  x[i].onbeforepaste = doBeforePaste;
  x[i].onpaste = doPaste;
  x[i].ondrop = doDrop;
 }
}
function doKeyPress()
{
 var obj = event.srcElement;
 if(obj.maxlength != null){
  var len = obj.maxlength;
  }
 var oTR = obj.document.selection.createRange();
 if(oTR.text.length >= 1)
  event.returnValue = true;
 else if(obj.value.length > len - 1)
  event.returnValue = false;
}
function doKeyDown()
{
  var obj = event.srcElement;
  if(obj.maxlength != null){
   var len = obj.maxlength;
   }
    setTimeout(function()
    {
      if(obj.value.length > len)
      {
          var oTR = window.document.selection.createRange();
          oTR.moveStart("character", -1*(obj.value.length - len));
          oTR.text = "";
      }
    },1)
}
function doBeforePaste()
{
 event.returnValue = false;
}
function doPaste()
{
  event.returnValue = false;
 var obj = event.srcElement;
 if(obj.maxlength != null){
  var len = obj.maxlength;
  }
 var oTR = obj.document.selection.createRange();
 var iInsertLength = len - obj.value.length + oTR.text.length;
 oTR.text = window.clipboardData.getData("Text").substring(0,iInsertLength);
}
function doDrop()
{
 event.returnValue = false;
}
</script>
效果:
    类似 input type="text" 中maxlength的效果。最多接受maxlenght个字符(不区分字母还是中文),包括输入和粘贴。
    有一点不同就是不接受drop事件。在同一个窗口中拖拉本来是能够控制的,但是从其它窗口拖入该textarea的话,我还没找到办法来控制,所以只好做成现在这样,不提供drop的功能。




    文章评论
 
 

发表评论

昵   称:
验证码:  点击图片可刷新验证码  博客过2级,无需填写验证码
内   容: