JavaScript

素の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;にします。これによりスクリーンリーダーも無視してくれます。

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

まとめ

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

著者のイメージ画像

BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。
プロフィール詳細