限制文本域中字符输入个数

最新推荐文章于 2020-04-02 17:15:50 发布

转载最新推荐文章于 2020-04-02 17:15:50 发布 · 228 阅读

文章标签：

#测试 #javascript #ViewUI

本文介绍了一种使用jQuery实现的动态调整文本域最大输入字符数的方法。通过设置文本框来控制文本域的最大输入长度，实现了对用户输入的有效限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
    $(function(){
        jQuery.fn.maxLength=function(max){
            return this.each(function(){
                var type=this.tagName.toLowerCase();
                var inputType=this.type?

this.type.toLowerCase:null; if(type=='input'&&inputType=="text"||inputType=="password"){ this.maxLength=max; }else if (type=="textarea") { this.onkeypress=function(e){ var obj=e||event; var keyCode=obj.keyCode; this.onkeyup=function(){ if (this.value.length>max) { this.value=this.value.substring(0,max); } } } } }) }; $("#btn").click(function(){ var vMaxLen=$("input#txt").val(); var iMaxLen=parseInt(vMaxLen); $("#txtarea").maxLength(iMaxLen); $("#log").html($("#log").html()+"<p>"+"最大字符个数设定为："+vMaxLen+"个"+"</p>"); }); });

</script>
</head>
<body>
    <p>
        <b>最大输入字符个数</b>
        <input type="text" id="txt" style="width: 32px;" value="10"/>
    </p>
    <p>
        <input type="button" id="btn" value="限制文本域中字符的个数"/>
    </p>
    <div>
        <textarea rows="" cols="" id="txtarea" name="maxLenTextarrea"></textarea>
    </div>
    <div id="log">
        <p>日志记录：</p>
    </div>