素のJavaScriptでinputタグ（テキストボックス、入力フォーム）の幅を自動調整

inputタグって何故か、幅を指定しない限り勝手に決まりますよね。

大抵の場合は他の幅と揃えたいので、min-width, max-width, widthのいずれかを指定するということで問題はないのですが、必要最低限の幅で自動調整して欲しい場合もあります。

その場合、現状JavaScriptを使うしかないようで、調べると不要にjQueryを利用するコードしか見当たらなかったこともあり、jQueryを利用しない方法をご紹介します。

jQueryはIEの引退によりお役御免の状態で、いつまでサポートされるかも分かりませんので、使用するのをやめていきましょう。

inputタグの幅を自動調整するデモ

次のテキストボックスにフォーカスを当てて、文字を打ってみてください。文字のトータルの幅に応じてテキストボックスの幅が変化します。

inputタグの幅を自動調整するコード

コードの紹介と、解説を致します。

HTML

<div class="wrapper">
   <input id="textBox" type="text" value="デモ">
   <span id="dummyTextBox" aria-hidden="true"></span>
</div>

CSS

#textBox{
   box-sizing: border-box;
   text-align: center;
   padding: 8px 12px;
}
#dummyTextBox{
   display: inline-block;
   position: absolute;
   height: 0;
   overflow: hidden;
   white-space: nowrap;
   clip: rect(0 0 0 0);
   padding: 8px 12px;
}

JavaScript

const textBox = document.getElementById('textBox');
const dummyTextBox = document.getElementById('dummyTextBox');
function inputWidthAdjust(){
   dummyTextBox.textContent = textBox.value;
   textBox.style.width = dummyTextBox.clientWidth + 'px';
}
inputWidthAdjust(); //最初の表示
textBox.addEventListener('input', inputWidthAdjust); //入力される度に幅を設定

inputタグの幅を自動調整するコードの解説

spanタグを配置し、そのspanタグに、inputタグに入力された文字をセット。その状態のspanタグの幅をinputタグの幅として設定するということをしています。

spanタグは非表示にするため、高さを0に、overflow: hidden;にしています。また、clipでくり抜いて表示領域もなくしています。表示される必要のないものなので、アクセシビリティ上の配慮からaria-hidden: true;にします。これによりスクリーンリーダーも無視してくれます。

paddingはwidthに含まれるため、spanタグには、inputタグのpaddingと同じpaddingの値を設定します。

まとめ

あまり必要になることはないですが、HTML、CSSの標準仕様でサポートされていても良さそうな内容ですね。良かったらご活用ください。