javascript - 根据输入的字符数更改字体

Question

如何根据输入的字符数使用 JavaScript 在输入字段上更改字体大小。例如，默认字体大小是16px，但是如果我添加超过10个字符，字体大小就会变成12px。

HTML:

<div class="phone-input">
    <input readonly="readonly" type="text" id="tocall" value="">

和CSS:

input#tocall {
    width: 145px;
    padding: 6px 3px;
    color: #424242;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    font-weight: bold;
    letter-spacing: 0.1em;
}

我不熟悉 JavaScript，所以请帮助我。

Answer 1

您可以执行类似于下面代码片段的操作，如果您将 readonly 保留在 input 之外，现在您将无法在其中输入任何内容。

var input = document.getElementById('tocall');
input.addEventListener('keyup', function (e) {
    if (e.target.value.length > 10) {
        e.target.style.fontSize = '12px';
    } else {
        e.target.style.fontSize = '16px';
    }
    return;
}, false);