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

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

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

wrap 属性で指定できる値

wrap 属性は、フォーム送信時にテキストエリア内のテキストをどのように折り返すかを制御します。指定できる値は以下の 2 種類です。

  • soft（初期値）：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません。
  • hard：画面上で折り返されている位置に改行を挿入した状態でテキストを送信します。この値を指定する場合は、あわせて cols 属性を設定する必要があります。

構文

wrap プロパティの構文は以下のとおりです。

1. wrap 属性の値を取得する場合

object.wrap

2. wrap 属性に値を設定する場合

object.wrap = soft | hard

それでは、実際の使用例を見ていきましょう。

サンプルコード

<!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;
       margin: 1rem 0;
    }
    .show {
       font-size: 1.5rem;
       margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Textarea wrap プロパティのデモ</h1>
<form action='' method="post">
<textarea rows="5" cols="28" wrap="soft">
こんにちは！私はダミーテキストを含むテキストエリア要素です。
</textarea>
<input type="submit" class='btn' value="フォームを送信">
</form>
<button onclick="set()" class="btn">wrap の値を表示</button>
<div class="show"></div>
<script>
    function set() {
       document.querySelector('.show').innerHTML = "wrap 属性の値は " + document.querySelector("textarea").wrap + " です";
    }
</script>
</body>
</html>

実行結果

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

ページ内の「wrap の値を表示」ボタンをクリックすると、textarea 要素の wrap 属性に設定されている値が画面に表示されます。

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

まとめ

Textarea wrap プロパティを使えば、JavaScript からテキストエリアの折り返し方法を動的に確認・変更できます。フォームの挙動を細かく制御したい場合にぜひ活用してください。

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

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

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

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