HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Search maxLengthプロパティの使い方｜検索フィールドの最大入力文字数を設定・取得する方法

HTML DOM の Input Search maxLength プロパティは、検索フィールド（<input type="search">）の maxlength 属性を設定または取得するために使用されるプロパティです。maxLength プロパティを利用することで、検索フィールドに入力できる最大文字数を指定できます。

構文（Syntax）

maxLength プロパティを設定する場合の構文は以下の通りです。

searchObject.maxLength = integer

integer には、検索フィールドに入力可能な最大文字数を指定します。デフォルト値は 524288 です。

また、現在設定されている最大文字数を取得したい場合は、次のように記述します。

var len = searchObject.maxLength;

サンプルコード

maxLength プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、検索フィールドの最大文字数が動的に変更される仕組みです。

<!DOCTYPE html>
<html>
<body>
<h1>Input Search maxLength Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5">
</form>
<p>下のボタンをクリックすると、上の検索フィールドに入力できる最大文字数が増えます</p>
<button onclick="changeMax()">文字数を変更</button>
<p id="Sample"></p>
<script>
    function changeMax() {
        document.getElementById("SEARCH1").maxLength = "15";
        document.getElementById("Sample").innerHTML = "最大文字数が15に増加しました";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOM Input Search maxLengthプロパティの使い方｜検索フィールドの最大入力文字数を設定・取得する方法

「文字数を変更」ボタンをクリックすると、以下のように変化します。

HTML DOM Input Search maxLengthプロパティの使い方｜検索フィールドの最大入力文字数を設定・取得する方法

コードの解説

上記のサンプルでは、以下のような処理が行われています。

1. 検索フィールドの作成

まず、type="search"、id="SEARCH1"、name="fruits" を指定した input 要素を作成し、maxlength 属性を 5 に設定しています。maxlength 属性があるため、この検索フィールドには最大 5 文字までしか入力できません。検索フィールドはフォーム要素の中に配置されています。

<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5"> </form>

2. ボタンの設置

次に、「文字数を変更」というラベルのボタンを作成しています。ユーザーがこのボタンをクリックすると、onclick イベントによって changeMax() 関数が実行されます。

<button onclick="changeMax()">文字数を変更</button>

3. maxLength プロパティの変更

changeMax() 関数内では、getElementById() メソッドを使って対象の検索フィールドを取得し、その maxLength プロパティを 15 に変更しています。同時に、id が「Sample」の p 要素に対して innerHTML プロパティを使用し、変更内容を伝えるメッセージを画面に表示しています。

function changeMax() {
    document.getElementById("SEARCH1").maxLength = "15";
    document.getElementById("Sample").innerHTML = "最大文字数が15に増加しました";
}

まとめ

maxLength プロパティを使えば、JavaScript から検索フィールドの最大入力文字数を柔軟に制御できます。初期値は HTML の maxlength 属性で設定しておき、ユーザーの操作や状況に応じて動的に変更したい場合に特に便利です。

  1. HTML DOM入力テキストのmaxLengthプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Text maxLengthプロパティは、テキスト入力フィールドのmaxlength属性を設定または取得するために使用されます。このプロパティを利用することで、テキストフィールドに入力できる最大文字数を指定したり、現在設定されている値を参照したりすることができます。構文maxLengthプロパティの基本的な構文は以下の通りです。maxLengthプロパティの設定textObject.maxLength = integerここで「integer」には、テキストフィールドに入力できる最大文字数を整数で指定します。なお、maxlength属性が明示的に指定されていない場

  2. HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma