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);

Answer 2

像这样...

在 JavaScript 中，访问文本为

myInput = document.getElementById('tocall');
myText = myInput.value;

然后找到文本的大小为

len = myText.length

现在，检查此值并使用 CSS 更改字体大小。

if (len > 10) {
    myInput.style.fontSize = "10px";
}