Beberapa baris input dalam <input type = "text" />

Saya memiliki input teks ini dalam bentuk:

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

Saya mencoba mendapatkannya untuk mengambil beberapa baris input. Lebar dan tinggi membuat kotak menjadi lebih besar, tetapi pengguna dapat memasukkan semua teks yang diinginkan namun hanya mengisi satu baris saja.

Bagaimana cara membuat input lebih seperti textarea?

Anda perlu menggunakan textarea untuk mendapatkan penanganan multiline.

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

Dimungkinkan untuk membuat input teks multi-baris dengan memberinya word-break: break-word;atribut. (Hanya menguji ini di Chrome)

Kamu tidak bisa Pada saat penulisan, satu-satunya elemen bentuk HTML yang dirancang multi-line adalah <textarea>.

Gunakan textarea

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

jangan menyisakan ruang antara tag pembuka dan penutup Atau Yang Lain Ini akan meninggalkan beberapa baris atau spasi kosong.

Periksa ini:

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

Elemen TEXTAREA membuat kontrol input teks multi-baris

Anda harus menggunakan textareauntuk mendukung input multi-jalur.

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

Jika Anda memerlukan textarea dengan tinggi otomatis, Gunakan ikuti dengan javascript murni,

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>

Input tidak mendukung banyak baris. Anda perlu menggunakan textarea untuk mencapai fitur itu.

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

Ingat bahwa <textarea>memiliki nilai di dalam tag , bukan di atribut:

<textarea>INITIAL VALUE GOES HERE</textarea>

Tidak bisa ditutup sendiri karena: <textarea/>

Untuk informasi lebih lanjut, lihat ini .

Jika Anda menggunakan Bereaksi, bahan pustaka-ui.com dapat membantu Anda dengan:

  <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

Gunakan <div contenteditable="true">( didukung dengan baik ) dengan menyimpan ke <input type="hidden">.

HTML:

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

js (menggunakan 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
    }
});