input要素に入力した文字列がはみ出る場合、指定したフォントサイズを下限としてはみ出なくなるサイズに調整します。

動作デモ####

動作概要####

type=textのinput要素において、valueの文字列が表示範囲からはみ出るにつれて(IEなど一部のブラウザを除き)scrollWidthプロパティの値が増加するので、scrollWidthが初期値より大きければ初期値に収まるまでfontSizeを下げる、という処理を行なっています。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>input[type=text] fontsize自動調整サンプル</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<style>
input {
  font-size: 40px;
  width: 280px;
}
</style>
</head>
<body>
<p>
  通常<br>
  <input type='text' value='0123456789'>
</p>
<p>
  自動調整適用<br>
  <input type='text' id='test1' value='0123456789'>
</p>
<p>
  自動調整適用(下限20px)<br>
  <input type='text' id='test2' value='0123456789'>
</p>

<script>
'use strict';
const fontSizeAdjuster = (function() {
  const lowerLimit = 10;
  return {
    adjust: function(e, ls, p) {
      e.style.fontSize = p.defaultFontSize + 'px';
      if(ls < 1) ls = 1;
      for(let i = p.defaultFontSize; i >= ls; i /= 1.02) {
        if(e.scrollWidth <= p.defaultScrollWidth) {
          break;
        }
        e.style.fontSize = i + 'px';
      }
    },
    set: function(e, ls) {
      if(e === undefined || e.tagName !== 'INPUT' || e.type !== 'text') {
        return;
      }
      if(isNaN(ls)) {
        ls = lowerLimit;
      }
      const v = e.value;
      e.value = '';
      const cs = window.getComputedStyle(e);
      const p = {};
      p.defaultFontSize = parseFloat(cs.fontSize);
      p.defaultScrollWidth = e.scrollWidth;
      e.style.height = cs.height;
      e.style.width = cs.width;
      e.style.padding = cs.padding;
      e.value = v;
      const a = this.adjust;
      a(e, ls, p);
      e.addEventListener('input', function() {
        a(e, ls, p);
      });
    },
  };
}());

fontSizeAdjuster.set(document.getElementById('test1'));
fontSizeAdjuster.set(document.getElementById('test2'), 20);
</script>
</body>
</html>

設定方法####

fontSizeAdjuster.set( 対象input要素 [,フォントサイズ下限] );
(フォントサイズ下限の単位はpx、省略時は10px)

~~iOS/iPadOSの場合は、フォントサイズの変化に伴ってinput要素自体のサイズも少し変動してしまいます。~~　追記: paddingを初期値で固定することで解消しました。