html - 当键入更多类型时，使 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()">