【JavaScript】
maxlength属性またはminlength属性を追加・値の変更をする方法
最大入力文字数・最小入力文字数の属性を設定する
投稿日 2022/08/05 更新日 2022/08/05
こんにちは。当サイトの管理者「元木皇天」です。
今回はJavaScriptを使用してmaxlength属性またはminlength属性を追加または値の変更をする方法について解説いたします。
環境
OS：MacOS Big Sur ver11
GoogleChrom：Ver103
やりたいこと
maxlength属性を追加・値の変更をする
minlength属性を追加・値の変更をする
実装サンプル
"max add"ボタンを押すと5文字までしか入力できなくなります。
"min add"ボタンを押すと最低5文字入力する必要があるようになります。
"max chg"ボタンを押すと10文字までしか入力できなくなります。
"min chg"ボタンを押すと最低3文字入力する必要があるようになります。
ブラウザの開発者モードを開いて追加されていることを確認してみてください。
参考文献
・HTML attribute: minlengthの公式ドキュメント
・HTML attribute: maxlengthの公式ドキュメント
・Element.setAttribute()の公式ドキュメント
・JavaScript コードレシピ集
・改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
目次
- maxlength属性を追加・値の変更をする
- minlength属性を追加・値の変更をする
- maxlength属性を削除する
- minlength属性を削除する
- まとめ
- 参考文献・おすすめ文献
- 関連記事
maxlength属性を追加・値の変更をする
要素にmaxlength属性を追加するにはsetAttribute()メソッドを使用します。
使い方は以下の通りです。
HTML
<input id="sample" type="text"/>
JavaScript
//DOMの取得
const sample = document.getElementById('sample');
//maxlengthを設定する
sample.setAttribute('maxlength', '10');
また、maxlengthの値を変更したい場合も、同じようにsetAttribute()を使用することで値を変更することが可能です。
minlength属性を追加・値の変更をする
要素にminlength属性を追加するにはmaxlength同様にsetAttribute()メソッドを使用します。
使い方は以下の通りです。
HTML
<input id="sample" type="text"/>
JavaScript
//DOMの取得
const sample = document.getElementById('sample');
//minlengthを設定する
sample.setAttribute('minlength', '10');
また、minlengthの値を変更したい場合も、同じようにsetAttribute()を使用することで値を変更することが可能です。
maxlength属性を削除する
minlength属性を削除する方法は以下当サイトの別記事を参照してください。
minlength属性を削除する
minlength属性を削除する方法は以下当サイトの別記事を参照してください。
まとめ
maxlength属性またはminlength属性を追加・変更するには
setAttribute()
を使用します。
参考文献・おすすめ文献
・HTML attribute: minlengthの公式ドキュメント
・HTML attribute: maxlengthの公式ドキュメント
・Element.setAttribute()の公式ドキュメント
