入力付きのフォームを作成しましたが、ボックスは単一行のテキストのみを処理します。入力フィールドがTwitterのボックスに似ているようにスタイルを設定します。ボックス自体は複数の行です。
また、Enterキーを押したときにも拡張されます。
これは私が現在持っているものです:
<form name="userForm">
<input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
<button type="submit" id="button">Submit</button>
</form>
ボタンと入力にスタイルを設定しましたが、その形状を変更するために何も行っていないため、デフォルトです。これを実現するには、何を調整する必要がありますか?
<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
}
});