【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 del"ボタンを押すと5文字までの制限がなくなります。
"min del"ボタンを押すと最低5文字の制限がなくなります。
ブラウザの開発者モードを開いて削除されることを確認してみてください。
参考文献
・HTML attribute: minlengthの公式ドキュメント
・HTML attribute: maxlengthの公式ドキュメント
・Element.removeAttribute()の公式ドキュメント
・JavaScript コードレシピ集
・改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
目次
- maxlength属性を削除する
- minlength属性を削除する
- maxlength属性を追加・値の変更をする
- minlength属性を追加・値の変更をする
- まとめ
- 参考文献・おすすめ文献
- 関連記事
maxlength属性を削除する
要素のmaxlength属性を削除するにはremoveAttribute()メソッドを使用します。
使い方は以下の通りです。
HTML
<input id="sample" type="text" maxlength="10"/>
JavaScript
//DOMの取得
const sample = document.getElementById('sample');
//maxlengthを削除する
sample.removeAttribute('maxlength');
取得したDOMに対してremoveAttribute()の引数に属性名を指定することで、対象の属性を削除することができます。
minlength属性を削除する
要素のminlength属性を削除するにはmaxlength同様removeAttribute()メソッドを使用します。
使い方は以下の通りです。
HTML
<input id="sample" type="text" minlength="10"/>
JavaScript
//DOMの取得
const sample = document.getElementById('sample');
//minlengthを削除する
sample.removeAttribute('minlength');
取得したDOMに対してremoveAttribute()の引数に属性名を指定することで、対象の属性を削除することができます。
maxlength属性を追加・値の変更をする
maxlength属性を追加・値の変更する方法は以下当サイトの別記事を参照してください。
minlength属性を追加・値の変更をする
minlength属性を追加・値の変更する方法は以下当サイトの別記事を参照してください。
まとめ
maxlength属性またはminlength属性を削除するには
removeAttribute()
を使用します。
