textarea验证字数

最新推荐文章于 2024-06-18 23:00:00 发布

原创最新推荐文章于 2024-06-18 23:00:00 发布 · 491 阅读

CC 4.0 BY-SA版权

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

<!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>