对原生input加上:当前输入字数/最大输入字数

news2024/11/24 18:40:39

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式调整 */
        .input-container {
            display: flex;
            align-items: center; /* 垂直居中对齐 */
        }

        #input {
            /* flex: 1;  *//* 输入框占据剩余空间 */
            margin-right: 10px; /* 右侧留出一定的间隔 */
        }

        #counter {
            font-size: 12px; /* 字号调整 */
        }

        .max-length-reached {
            color: red; /* 计数器文字变成红色 */
        }
    </style>
</head>
<body>
    <div class="input-container">
        <input id="input" type="text" maxlength="30">
        <div id="counter">0/30</div>
    </div>

    <script>
        // 获取输入框和计数器的元素
        const input = document.getElementById('input');
        const counter = document.getElementById('counter');
        const maxLength = parseInt(input.getAttribute('maxlength')); // 获取最大输入长度并转换为整数
        
        // 监听输入框的输入事件
        input.addEventListener('input', function() {
            // 获取已输入的字数
            const enteredLength = input.value.length;
            
            // 更新计数器的文本内容
            counter.textContent = `${enteredLength}/${maxLength}`;
            
            // 如果已输入的字数达到最大限制，将计数器的颜色设为红色
            if (enteredLength === maxLength) {
                counter.classList.add('max-length-reached');
            } else {
                counter.classList.remove('max-length-reached');
            }
        });
    </script>
</body>
</html>

运行结果: