textarea验证字数

本文探讨了如何在HTML的textarea元素中实现字数限制和验证功能,包括前端JavaScript的解决方案以及后端验证的重要性,旨在确保用户输入符合指定的字符限制。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    </style>
</head>
<body>
<form>
    <table border="0" cellpadding="0" cellspacing="0" width="500px;">
        <tr>
            <td align="right">
                <textarea id="content" cols="50" rows="10" style="overflow: auto;"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">
                <div style="vertical-align: bottom; height: 20px; line-height: 20px; margin: 0px; color: Gray;">
                    <label id="info2" style="float: right; font-size: 12px;">个字</label>
                    <span id="info" style="float: right; font-size: 20px; font-weight: bold;">140</span>
                    <label id="info1" style="float: right; font-size: 12px;">还能输入</label>
                </div>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    $(function() {
        $("#content").keyup(check);   
        $("#content").onpaste(check);  //粘贴文本时执行
    });
    function check() {
        var str = $("#content").val();
        var len = strlen(str);
        var info = 140 - len;
        info = info + "";
        if (info.indexOf('.') > 0)
            info = info.substring(0, info.indexOf('.'));
        if (len <= 140) {
            $("#info1").html("还能输入");
            $("#info").css('color', 'gray');
            $("#info").html(info);
        } else {
            info = info.substr(1)
            $("#info1").html("超出");
            $("#info").css('color', 'red');
            $("#info").html(info);
        }
    }
    
    function trim(str) {
        return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
    }
    function strlen(str) {
        var str = trim(str);
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            len += str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255 ? 0.5 : 1;
        }
        return len;
    }
</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值