js输入框字数限制

精贴 置顶
1934 0


        一般在前台页面会对文本框的字数要做限制,一种方法是提示超出多少个字,不让保存对文本;还有一种是自动截取,但是自动截取对于键盘操作是没有问题的,对于鼠标的复制粘帖会有一些问题。下面看下代码:

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>  

<script type="text/javascript" src="common.js"></script>  

<body>    

     <!-- 有用代码开始  -->  

          <!--//输入框输入长度限制改进2,此方法绑定在input,textarea的onfocus事件上,参数分别人:this, maxlength,显示剩余字数的span的id.-->  

          <textarea id="textarea_catch_ask" onfocus="fed_inputMaxLength(this,200,'catchask_con_counter_num')" style="width:300px;height:300px" ></textarea>  

          <div class="textarea_con_counter">还能输入<strong id="catchask_con_counter_num">200</strong>字</div>  

          <!--有用代码结束-->  

</body>  


common.js的代码:

//输入框输入长度限制改进2,此方法绑定在input,textarea的onfocus事件上,参数分别人:this, maxlength,显示剩余字数的span的id.  

function fed_inputMaxLength(target,maxlength,counterId){  

    if($(target).attr('fed_max_length')==null){  

        $(target).attr('fed_max_length',maxlength);  

        var counter = $('#'+counterId);  

        if ($.browser.msie) { //IE浏览器  

            $(target).unbind("propertychange").bind("propertychange", function(e) {  

                e.preventDefault();  

                textareaMaxProc1(target, maxlength);  

                counter.html(maxlength-$(target).val().length);  

            });  

            target.attachEvent("onpropertychange", function(e) {  

                //e.preventDefault();  

                textareaMaxProc1(target, maxlength);  

                counter.html(maxlength-$(target).val().length);  

            });  

            

        }else { //ff浏览器  

            target.addEventListener("input",function(e) {  

                e.preventDefault();  

                textareaMaxProc1(target, maxlength);  

                counter.html(maxlength-$(target).val().length);  

            },false);   

        }  

        $('target').unbind("keypress").bind("keypress", function(event) {  

            var code;  

            if(typeof event.charCode =="number" ){ //charCode只在keypress事件后才包含值,此时keyCode可能有值也可能没有,Ie没有charCode属性。  

                code = event.charCode;  

            }else{  

                code = event.keyCode;  

            }  

            if(code > 9 && !event.ctrlKey && $(target).val().length>=maxlength){  

                event.preventDefault();  

            }else if(event.ctrlKey && $(target).val().length>=maxlength && code==118){  

                event.preventDefault();  

            }  

        });  

    }  

}  

  

   

function textareaMaxProc1(textArea, total){  

    var max;  

    max=total;  

      

    if($(textArea).val().length > max){  

        $(textArea).val($(textArea).val().substring(0,max));  

    }  

}  

  • 没有任何评论
今日天气 ···

···

···

···

热门排行
CSS cursor鼠标样式一览表 2012/6/25
.NET后台写JS代码 2011/11/3
网站地址多出jdfwkey的问题解析及... 2010/8/25
百度、google、Yahoo网站地图制作... 2011/1/30
数据库xxx的日志已满,请备份该数... 2013/7/19
<a>标签的伪类书写顺序问题... 2010/9/4
CEO名言 2010/8/31
什么是长尾关键词? 2010/9/24
Mysql 主从数据库同步 2010/9/12
用ASP实现网页BBS 2010/11/1
博主推荐
网站title标题如何正确修改不会被... 2013/8/26
ASP .NET MYSQL 的简单分页 并不... 2013/8/19
网站有弹窗广告这样的站点,百度... 2013/8/17
做淘宝SEO优化需要注意的8大问题 2013/8/17
淘宝网怎么做SEO优化 2013/8/17
站长们要学习的“苍井空精神” 2013/8/17
苹果公司今日发布了iOS 7第五个开... 2013/8/7
小米1刷V5系统WIFI不能连接解决办... 2013/8/1
本博客手机版上线咯!会员后台也... 2013/7/31
Win7系统环境安装配置PHP开发环境... 2013/7/29
随便看看
Jquery清除style样式 2014/3/8
淘宝网怎么做SEO优化 2013/8/17
避免恶意攻击行为 网络服务器安全... 2010/9/2
RSS你会用了吗?(技术实现总结) 2010/9/11
用JS设置打开的浏览器窗口的大小 2010/9/13
如何才能练就出泷泽萝拉的丰满胸... 2013/8/17
最新黑链代码expression:隐藏链... 2010/9/12
css或js控制图片自适应 2010/9/6
Eclipse快捷键大全 2010/8/31
《请给我结果》读后感 2013/10/6
北京 上海 杭州 深圳 广州 成都