输入框字数jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Length Control</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="inputField">输入框（最多10个字符）:</label>
    <input type="text" id="inputField" maxlength="10">
    <div id="charCount">0/10</div>

    <script>
        $(document).ready(function() {
            var maxLength = 10;
            $('#inputField').on('input', function() {
                var currentLength = $(this).val().length;
                $('#charCount').text(currentLength + '/' + maxLength);
                if (currentLength > maxLength) {
                    $(this).val($(this).val().substring(0, maxLength));
                }
            });
        });
    </script>
</body>
</html>