jq、js 获取input、textarea文字显示的行数、对输入做限制

付煜晨

已于 2023-10-25 15:51:24 修改

阅读量1.3k

点赞数

分类专栏：前端学习记录文章标签： javascript 开发语言 ecmascript

于 2023-06-07 10:06:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47127690/article/details/131081873

版权

前端学习记录专栏收录该内容

12 篇文章

订阅专栏

该代码段使用JavaScript和jQuery实现了一个功能，动态监控input文本框和textarea的字数，显示当前输入的字数并限制textarea不超过1000字。当textarea超过字数限制时，会弹出警告并阻止提交。

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

<input type="text" value="我是输入的文字"  maxlength="10" id="detail1"/>
<p><span id="detail1_num">0</span>/<span>10</span></p>
 
<textarea class="{% if is_mobile_client() %} text-2 {% else %} pc-text-2 {% endif %}" name="lecIntor" cols="134" rows="6" required="required" id="textVal"></textarea>
<p class="pc-number"><span id="textNum">0</span>/<span>1000</span></p>

$(function(){        
        /*input字数*/
        /*在页面刚载入时先显示出输入框的字数*/
        var text1=$("#detail1").val();
        var counter1=text1.length;
        $("#detail1_num").text(counter1);
        /*添加触发事件进行动态计算输入框的字数*/
        $("#detail1").on('blur keyup input',function(){
            var text=$("#detail1").val();
            var counter=text.length;
            $("#detail1_num").text(counter);
        });
    /* textarea字数*/
	var textArea = $("#textVal").val();
    var content = textArea.length;
    $("#textNum").text(content);
    $("#textVal").on('blur keyup input',function(){
        var text = $("#textVal").val();
        var counter = text.length;
        $("#textNum").text(counter);
        if(counter > 1000){
            alert('个人介绍不能超过1000字限制');
            return false;
        }
    });
});