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

403

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?

html Pemula
sumber

Jawaban:

676

Anda perlu menggunakan textarea untuk mendapatkan penanganan multiline.

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

Ólafur Waage
sumber
62
Dan tag teks tidak bisa menutup sendiri. <textarea \>tidak valid.
Alex H
29
@ alexH terlepas dari textarea, itu tebasan yang salah. Jawaban orisinal sudah menutup sendiri, tetapi setidaknya itu adalah tebasan yang benar.
Adam
4
@Adam saya tahu, tetapi saya tidak dapat mengedit saya lagi. Dan saya tidak ingin menghapusnya, karena menurut saya bagian penutup diri itu penting.
Alex H
4
Ya, tetapi, textareatidak mendukung patternatribut. Sangat sial.
toddmo
1
apa yang saya tidak suka tentang ini adalah bahwa di JQuery, Anda tidak dapat menetapkan nilai textarea menggunakan val(). Anda harus melakukannya append. :(
Malcolm Salvador
59

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

Sté
sumber
1
Terima kasih! Saya perhatikan bahwa Chrome memperbolehkan banyak baris untuk input, yang saya benar-benar tidak mau, dan alasannya adalah kata-break yang diwarisi dari elemen tubuh
rap1ds
3
Terlihat bagus di Chrome 39 dan Safari 8.0.2, tetapi bukan Firefox 34 dalam pengujian singkat saya. :( jsfiddle.net/msybs9g7
Jeremy Wadhams
5
Saya pikir itu tidak lagi berfungsi di Chrome.
Fifi
53

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

Álvaro González
sumber
49

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.

themightysapien
sumber
7

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>
Osanda Deshan
sumber
1

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>
Luaskan cuplikan

Prasad Gayan
sumber
0

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 .

IgniteCoders
sumber
0

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

Alan
sumber
-2

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
    }
});
Fanky
sumber