【JavaScript】
maxlength属性またはminlength属性を追加・値の変更をする方法

maxlength属性を追加・値の変更をする

minlength属性を追加・値の変更をする

実装サンプル

"max add"ボタンを押すと5文字までしか入力できなくなります。
"min add"ボタンを押すと最低5文字入力する必要があるようになります。
"max chg"ボタンを押すと10文字までしか入力できなくなります。
"min chg"ボタンを押すと最低3文字入力する必要があるようになります。

ブラウザの開発者モードを開いて追加されていることを確認してみてください。

参考文献
・HTML attribute: minlengthの公式ドキュメント
・HTML attribute: maxlengthの公式ドキュメント
・Element.setAttribute()の公式ドキュメント
・JavaScript コードレシピ集
・改訂3版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属性を削除する方法は以下当サイトの別記事を参照してください。

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

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

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