网站地图    收藏   

主页 > 前端 > javascript >

ie下textarea限制字数输入与光标移动问题

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章来给大家介绍ie下textarea限制字数输入与光标移动问题解决办法,些方法支持ie6 7 8 9 chrome firefox浏览器哦。...

最近做一个简单的字数限制碰到问题,就是使用jquery来限制textarea里面的字数的时候,碰到两个问题
1.用户输入的触发,比如退格,输入、粘贴,刚开始的时候绑定的是onkeyup onpaste 事件,但是体验就是不爽,用户使用拼音输入法的时候,拼写的字母也被keyup触发了,后来又发现了oninput事件,但是ie不支持,查了一下资料,原来ie全系列支持propertychange事件,于是首先判断用户的浏览器类型,然后决定绑定事件,问题解决。
2.在解决1的问题后,测试反映,ie系列下在用户输入一定字数后,光标就会跑到首尾,有时候甚至会把用户的输入全部干掉~ 可恶的ie,这个问题的解决是不要使用value,使用text即可

附加个bug,就是ie7的propertychange有bug,会不断地异步执行,然后抛出 stack overlimit的错误,所以加了一个syncProcessSign
还有截取字符串要考虑中文的情况
代码如下:

 

 代码如下 复制代码
function checkcontent(){
 if($.syncProcessSign) return ;
 $.syncProcessSign = true;
 var desc = $("#papercontent").val();
 var curLength=desc.realLength();
 if(curLength >= 35) {
  $("#papercontent").val($("#papercontent").val().substring(0, 35));//此处最好换成您的中文截取方式
  //$("#cannum").text(0);//可以显示字数
 }else{
  //$("#cannum").text(200-curLength);//可以显示字数
 }
 $.syncProcessSign = false;
}
$(document).ready(function(){
 if($.browser.msie&&$.browser.version!='9.0') //判断浏览器
 {
  //ie浏览器
  $('#papercontent').bind('propertychange', function() {
   var content = $("#papercontent").val();
     var curLength=content.length;
     if(curLength > 35) {
                   $(this).text($(this).text().substring(0, 35));
               }
     //$("#cannum").text(140-curLength);
           //$("#nownum").text(curLength);
  });
 }else{
  //非ie浏览器
  $('#papercontent').bind('input', function() {
   checkcontent();
  });
 }
});

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论