<input type =“ text” />に複数行の入力

私はこのテキストをフォームに入力しています：

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

複数行の入力を取得するようにしています。幅と高さによってボックスは大きくなりますが、ユーザーは必要なすべてのテキストを入力できますが、1行しか埋められません。

入力をテキストエリアのようにするにはどうすればよいですか？

複数行を処理するには、textareaを使用する必要があります。

<textarea name="Text1" cols="40" rows="5"></textarea>

word-break: break-word;属性を与えることで、テキスト入力を複数行にすることができます。（これはChromeでのみテストされています）

できません。執筆時点では、複数行になるように設計されているHTMLフォーム要素はのみです<textarea>。

テキストエリアを使用する

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

開始タグと終了タグの間にスペースを入れないでくださいOr Elseこれにより、いくつかの空の行またはスペースが残ります。

これをチェックして：

• http://www.w3.org/TR/html401/interact/forms.html#h-17.7

TEXTAREA要素は、複数行のテキスト入力コントロールを作成します

textarea複数行の入力をサポートするには、を使用する必要があります。

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

自動高さのテキストエリアが必要な場合は、純粋なJavaScriptで以下を使用します。

function auto_height(elem) {  /* javascript */
    elem.style.height = "1px";
    elem.style.height = (elem.scrollHeight)+"px";
}

.auto_height { /* CSS */
  width: 100%;
}

<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>

入力は複数行をサポートしていません。その機能を実現するには、textareaを使用する必要があります。

<textarea name="Text1"></textarea>

属性ではなく、タグ内<textarea>に値があることに注意してください。

<textarea>INITIAL VALUE GOES HERE</textarea>

次のように自己閉鎖することはできません。 <textarea/>

詳細については、を見て取り、これを。

Reactを使用している場合、ライブラリmaterial-ui.comが次のことを支援します。

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

収納に使う<div contenteditable="true">（しっかりサポート）する<input type="hidden">。

HTML：

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

js（jQueryを使用）

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});