javascript - 显示输入字段所需的最少字符数

Question

我有这个代码:

<script type="text/javascript">
var maxLength=10;
function charLimit(el) {
    if (el.value.length > maxLength) return false;
    return true;
}

function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) charCount.innerHTML = maxLength - el.value.length;
    return true;
}
</script>

与此输入字段一起:

<input type="text" onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)" />
<span id="charCount">10</span>

现在，它正在对输入的字符进行倒计时，从 10 到 0。我想向其中添加一些代码，当页面加载时，它将显示10(最少输入3个字符)，当输入这三个字符时，( ) 将会消失，只剩下数字，即 7。

此外，如果删除输入的文本，如果字符数小于 3，( ) 中的文本将再次显示，即类似这样:8 (输入 3最少字符数)

或者更好，如果可以这样制作:

10 (0 characters entered out of 3 miniumum)
9 (1 characters entered out of 3 miniumum)
8 (2 characters entered out of 3 miniumum)
7

它不需要是我当前拥有的代码，如果有的话建议其他代码。

Answer 1

因为没有人写答案，所以我就写一个。 (即使看起来不像您自己尝试过。)

function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) charCount.innerHTML = maxLength - el.value.length;
    return true;
}

至

function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) {
        if(el.value.length < 3) {
            charCount.innerHTML = (maxLength - el.value.length) + ' (' + (3 - el.value.length) + ' out of 3 characters minimum)';
        } else {
            charCount.innerHTML = maxLength - el.value.length;
        }
    }
    return true;
}