投稿日 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属性を追加するにはsetAttribute()メソッドを使用します。
使い方は以下の通りです。
HTML
<input id="sample" type="text"/>
JavaScript
//DOMの取得 const sample = document.getElementById('sample'); //maxlengthを設定する sample.setAttribute('maxlength', '10');
また、maxlengthの値を変更したい場合も、同じようにsetAttribute()を使用することで値を変更することが可能です。
要素にminlength属性を追加するにはmaxlength同様にsetAttribute()メソッドを使用します。
使い方は以下の通りです。
HTML
<input id="sample" type="text"/>
JavaScript
//DOMの取得 const sample = document.getElementById('sample'); //minlengthを設定する sample.setAttribute('minlength', '10');
また、minlengthの値を変更したい場合も、同じようにsetAttribute()を使用することで値を変更することが可能です。
minlength属性を削除する方法は以下当サイトの別記事を参照してください。
minlength属性を削除する方法は以下当サイトの別記事を参照してください。
maxlength属性またはminlength属性を追加・変更するには
setAttribute()
を使用します。
・HTML attribute: minlengthの公式ドキュメント
・HTML attribute: maxlengthの公式ドキュメント
・Element.setAttribute()の公式ドキュメント