web-dev-qa-db-ja.com

input要素（type = "text"）に複数行のテキストを処理させる

入力付きのフォームを作成しましたが、ボックスは単一行のテキストのみを処理します。入力フィールドがTwitterのボックスに似ているようにスタイルを設定します。ボックス自体は複数の行です。

Twitter-input

また、Enterキーを押したときにも拡張されます。

enter image description here

これは私が現在持っているものです：

<form name="userForm">
  <input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
  <button type="submit" id="button">Submit</button>
</form>

ボタンと入力にスタイルを設定しましたが、その形状を変更するために何も行っていないため、デフォルトです。これを実現するには、何を調整する必要がありますか？

htmlcssformstwitterinput
5
AlanH

<div contenteditable="true">への格納で<input type="hidden">（ supported well ）を使用します。

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]
});

誰かがこれを使用して単一の行をラップし、Enterを使用してフォームを送信または移動したい場合は、以下を追加します。

$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});
1
Fanky