根据键入的字符数更改字体

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从[{1}}中删除，您可以执行以下代码段中的操作，现在您无法输入任何内容。

input

Answer 2

喜欢这个......

在JavaScript中，以

的形式访问文本

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

然后找到文本的大小

len = myText.length

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

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