随着输入的内容增多，HTML 输入字体大小会缩小

Question

我有一个包含 3 个字符的 HTML 文本字段。如果用户输入 4 个字符，我希望缩小字体大小以适合四个字符。

Acrobat 对于表单具有这种行为。我想要 HTML 中的这种行为。

也就是说，如果我有一个包含 3 个字符的文本字段：

用户输入 4，我希望文本缩小：

Answer 1

你需要使用JavaScript。这是通过检查输入是否可以滚动来实现的，如果可以，则意味着内容已经溢出，在这种情况下字体大小应该变小。
希望这可以帮助！

function changefontsize() {
  var myInput = document.getElementById('myInput');
  if(isOverflown(myInput)) {
    while (isOverflown(myInput)){
    currentfontsize--;
    myInput.style.fontSize = currentfontsize + 'px';
    }
  }else {
    currentfontsize = 13;
    myInput.style.fontSize = currentfontsize + 'px';
    while (isOverflown(myInput)){
    currentfontsize--;
    myInput.style.fontSize = currentfontsize + 'px';
    }
  }	
}

function isOverflown(element) {
    return element.scrollWidth > element.clientWidth;
}

#myInput {
  padding:5px;
  border-radius:3px;
  font-family:Arial;
  width:100px;
  font-size:13px;
  height:20px;
}

Type Here -> <input type="text" id="myInput" onkeypress="changefontsize()" onchange="changefontsize()">