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

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

HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。

maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。

構文

maxLengthプロパティの基本的な構文は以下のとおりです。

1. maxLengthの値を取得する場合

object.maxLength

2. maxLengthの値を変更する場合

object.maxLength = "数値"

それでは、HTML DOM Textarea maxLengthプロパティの具体的な使用例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
    .show {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Textarea maxLength Property Demo</h1>
<textarea maxlength="50">Hi! I'm a text area element with some dummy text.</textarea>
<button onclick="set()" class="btn">Show Maximum Length</button>
<div class="show"></div>
<script>
    function set() {
        document.querySelector('.show').innerHTML = 'The maximum number of characters allowed in the above text area is ' + document.querySelector("textarea").maxLength;
    }
</script>
</body>
</html>

実行結果

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

「Show Maximum Length」ボタンをクリックすると、textarea要素のmaxLength属性の値（この例では「50」）が画面に表示されます。

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

コードの解説

このサンプルコードでは、maxlength="50"が設定されたテキストエリアを配置しています。ボタンがクリックされるとset()関数が呼び出され、querySelector()で取得したtextarea要素のmaxLengthプロパティの値を、.showクラスが付いたdiv要素内に出力しています。

まとめ

maxLengthプロパティを使えば、テキストエリアの最大入力文字数をJavaScriptから簡単に取得・変更できます。フォームの入力バリデーションや動的なUI制御に役立つ便利なプロパティなので、ぜひ活用してみてください。


  1. HTML DOM Textareaのcolsプロパティとは？使い方とサンプルコードを解説

    HTML DOM の Textarea cols プロパティは、HTML ドキュメント内のテキストエリア（<textarea>）要素が持つ cols 属性の値を取得したり、変更したりするために使用されます。cols 属性は、テキストエリアの1行に表示できる平均的な文字数（列数）を指定するもので、この値を操作することでテキストエリアの横幅を動的に制御できます。構文cols プロパティの基本的な構文は以下の通りです。1. cols の値を取得する場合object.cols2. cols の値を設定する場合object.cols = numbernumber には、表示したい列数（文字数

  2. HTML DOM Textareaのrequiredプロパティとは？構文と使い方をサンプルコード付きで解説

    HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir