Membungkus teks di dalam input type = "teks" elemen HTML / CSS

97

HTML yang ditunjukkan di bawah ini,

<input type="text"/>

ditampilkan di browser seperti ini:

Ketika saya menambahkan teks berikut,

Rubah cokelat cepat melompati anjing malas itu.

Menggunakan HTML di bawah ini,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

itu ditampilkan di browser seperti ini:

Tapi saya ingin itu ditampilkan di browser seperti ini:

Saya ingin teks dalam elemen masukan saya membungkus. Bisakah ini dicapai tanpa textarea?

html input word-wrap Desainer web
sumber
3
Tidak, saya rasa tidak bisa. Tapi mengapa textarea bukan pilihan?
Pekka
35
Menggunakan textarea terkadang bukan merupakan pilihan karena Anda tidak ingin mengizinkan input beberapa baris teks. Hanya untuk membungkus satu baris teks (Catatan: Keduanya bukanlah hal yang sama).
Flatliner DOA
Ada solusi yang dibahas untuk tujuan yang tepat ini dengan CSSWG untuk standarisasi, sayangnya saya tidak dapat menemukan masalahnya.
Null
Aku menemukannya; github.com/w3c/csswg-drafts/issues/2141
Null
1
@Pekka 웃 bukan berarti relevan, tetapi beberapa alasannya meliputi: kami tidak dapat menggunakan validasi html5 pada area teks; kita tidak dapat menggunakan batasan pola untuk memvalidasi area teks; textarea adalah sinonim yang tidak perlu untuk input type = text (ini adalah input yang bertipe teks!) yang berarti dua kali gaya, dll, dll. Singkatnya ada banyak alasan.
Peter Konga-Kamau

Jawaban:

62

Itu adalah textareatugasnya - untuk input teks multiline. Tidak input akan melakukannya ; itu tidak dirancang untuk melakukannya.

Jadi gunakan textarea. Selain perbedaan visualnya, mereka diakses melalui JavaScript dengan cara yang sama (gunakan valueproperti).

Anda dapat mencegah baris baru dimasukkan melalui inputacara dan hanya menggunakan replace(/\n/g, '').

alex
sumber
69
Ini tidak benar-benar menjawab pertanyaan tentang bagaimana mengumpulkan satu baris input sambil menampilkannya dibungkus selama entri.
ehdv
3
Masalah utama dengan ini adalah textarea menekan tombol buka pada perangkat seluler.
Dan
2
@alex Tepat. Jadi jika Anda menginginkan masukan multiline nyata, maka textarea lebih baik, tetapi jika Anda hanya ingin masukan dalam bentuk kata, maka solusi css lebih baik.
Dan
1
Saya baru saja akan mengatakan itu <textarea>tidak akan berfungsi dengan hal-hal seperti pelengkapan otomatis jQuery, tetapi cukup ubah <input>menjadi <textarea>dan hanya itu yang diperlukan. Hore untuk standar!
Sablefoste
9
Seperti yang dikatakan di atas: Membungkus garis! == string multi-baris. Saya tidak yakin mengapa ini adalah jawaban yang diterima karena tidak menjawab pertanyaannya.
mattLummus
37

Word Break akan meniru beberapa maksud

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />
Luaskan cuplikan

Sebagai solusinya, solusi ini kehilangan efektivitasnya di beberapa browser. Silakan periksa demo: http://cssdesk.com/dbCSQ

Thiago Macedo
sumber
7
Saya baru saja mengujinya di Firefox 43.0.4 dan itu tidak berfungsi namun di Safari 9 dan Chrome 48 sepertinya berfungsi: cssdesk.com/dbCSQ
Jason Sperske
6
Demo terlampir oleh @JasonSperske tidak berfungsi untuk saya, baik di Firefox 45, maupun di Chrome 50.
czerny
Demo berfungsi untuk saya di chrome 48 di linux, tetapi css yang sama di halaman saya sendiri tidak.
Mnebuerquo
40
Solusi menjadi usang setidaknya dari chrome 50 :(
userlond
4
Lupakan tentang solusi ini: tidak berfungsi dengan Chrome 74/75, Firefox 63/67, Edge 42, IE 11, dan UCBrowser 7.0 (tetapi bekerja dengan GNOME Web 3.28 - AppleWebKit / 605.1.15)
tanguy_k
10

Anda tidak dapat menggunakan input untuk itu, Anda perlu menggunakan textarea sebagai gantinya. Gunakan textarea dengan wrap="soft"kode dan opsional atribut lainnya seperti ini:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atributes: Untuk membatasi jumlah teks di dalamnya, misalnya menjadi "40" karakter, Anda dapat menambahkan atribut maxlength="40"seperti ini: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Untuk menyembunyikan gaya scrollnya. jika Anda hanya menggunakan overflow:scroll;atau overflow:hidden;atau overflow:auto;hanya akan berpengaruh pada satu bilah gulir. Jika Anda menginginkan atribut yang berbeda untuk setiap scroll bar maka gunakan atribut seperti ini overflow:scroll; overflow-x:auto; overflow-y:hidden;pada style area: Untuk membuat textarea tidak dapat diubah ukurannya Anda dapat menggunakan style dengan resize:none;seperti ini:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

Dengan begitu Anda dapat memiliki atau contoh textarea dengan 14 baris dan 10 kolom dengan bungkus kata dan panjang karakter maksimal "40" karakter yang bekerja persis seperti kotak teks masukan tetapi dengan baris dan tanpa menggunakan teks masukan.

CATATAN: textarea bekerja dengan baris tidak seperti input <input type="text" name="tbox" size="10"></input>yang dibuat untuk tidak bekerja dengan baris sama sekali.

SeekLoad
sumber
7

Untuk membuat input teks yang nilai di balik terpal adalah string baris tunggal tetapi disajikan kepada pengguna dalam format terbungkus kata, Anda dapat menggunakan atribut contenteditable pada satu <div>atau elemen lain:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>
Luaskan cuplikan

Sam Herrmann
sumber