【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属性を追加・値の変更をする

要素に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属性を削除する方法は以下当サイトの別記事を参照してください。

【JavaScript】maxlength属性またはminlength属性を削除する方法

minlength属性を削除する

minlength属性を削除する方法は以下当サイトの別記事を参照してください。

【JavaScript】maxlength属性またはminlength属性を削除する方法

まとめ

maxlength属性またはminlength属性を追加・変更するには

setAttribute()

を使用します。

参考文献・おすすめ文献

HTML attribute: minlengthの公式ドキュメント
HTML attribute: maxlengthの公式ドキュメント
Element.setAttribute()の公式ドキュメント

元木皇天

化学系大学出身
現在は3年目SEとして
日々がんばっています

Twitter