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;
にします。これによりスクリーンリーダーも無視してくれます。
padding
はwidth
に含まれるため、spanタグには、inputタグのpadding
と同じpadding
の値を設定します。
まとめ
あまり必要になることはないですが、HTML、CSSの標準仕様でサポートされていても良さそうな内容ですね。良かったらご活用ください。