Giriş türü içine metin sarma = "metin" öğesi HTML / CSS

96

Aşağıda gösterilen HTML,

<input type="text"/>

aşağıdaki gibi bir tarayıcıda görüntülenir:
Bir tarayıcıda yukarıdaki HTML bu şekilde görüntülenir.

Aşağıdaki metni eklediğimde,

Hızlı kahverengi tilki tembel köpeğin üzerinden atladı.

Aşağıdaki HTML'yi kullanarak,

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

aşağıdaki gibi bir tarayıcıda görüntülenir:
Bir tarayıcıda yukarıdaki HTML bu şekilde görüntülenir.

Ancak bunun gibi bir tarayıcıda görüntülenmesini istiyorum:
Yukarıdaki HTML’nin bir tarayıcıda bu şekilde görüntülenmesini istiyorum.

Giriş öğemdeki metnin kaydırılmasını istiyorum. Bu bir metin alanı olmadan yapılabilir mi?

html input word-wrap

— Web tasarımcısı
kaynak

3

Hayır, olabileceğini sanmıyorum. Peki bir metin alanı neden bir seçenek değil?

— Pekka

35

Bir metin alanı kullanmak bazen bir seçenek değildir çünkü birden çok metin satırının girilmesine izin vermek istemezsiniz. Sadece tek bir metin satırını kaydırmak için (Not: Aynı şey değiller).

— Flatliner DOA

Standardizasyon için CSSWG ile bu amaç için tartışılan bir çözüm var , ne yazık ki sorunu bulamıyorum.

— Boş

Buldum; github.com/w3c/csswg-drafts/issues/2141

— Null

1

@Pekka 웃 konuyla ilgili değil, ancak bazı nedenler şunları içerir: metin alanlarında html5 doğrulamasını kullanamıyoruz; metin alanlarını doğrulamak için desen kısıtlamalarını kullanamayız; bir metin alanı, bir girdi türü için gereksiz bir eşanlamlıdır = metin (metin türü bir girdidir!), bu da stilin iki katı anlamına gelir, vb. Kısacası birçok neden vardır.

— Peter Konga-Kamau

62

Bu, textareaçok satırlı metin girişi için işidir. input Yapmayacağım ; bunu yapmak için tasarlanmadı.

Öyleyse bir textarea. Görsel farklılıklarının yanı sıra, JavaScript aracılığıyla aynı şekilde erişilir (kullanım valueözelliği).

Yeni satırların inputolay aracılığıyla girilmesini ve sadece bir replace(/\n/g, '').

— Alex
kaynak

69

Bu, giriş sırasında kaydırılmış olarak görüntülenirken tek bir satır girdinin nasıl toplanacağı sorusuna gerçekten cevap vermez.

— ehdv

3

Bununla ilgili önemli bir sorun, bir metin alanının mobil cihazlarda git düğmesini bastırmasıdır.

— Dan

2

@alex Kesinlikle. Bu nedenle, gerçek çok satırlı girdi istiyorsanız, bir metin alanı daha iyidir, ancak yalnızca sözcük kaydırmalı girdi istiyorsanız, css çözümü daha iyidir.

— Dan

1

Söylemek hakkında ben <textarea>jQuery'nin otomatik tamamlama gibi şeylerle olmaz işi, ama sadece değiştirmek <input>için <textarea>ve gereklidir hepsi bu. Yaşasın standartlar!

— Sablefoste

9

Yukarıda belirtildiği gibi: Bir satırı sarmak! == çok satırlı bir dizge. Soruyu cevaplamadığı için neden kabul edilen cevap olduğundan emin değilim.

— mattLummus

37

Kelime Break, amacın bir kısmını taklit edecek

    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" />

Snippet'i genişlet

Çözüm olarak, bu çözüm bazı tarayıcılarda etkinliğini kaybetti. Lütfen demoyu kontrol edin: http://cssdesk.com/dbCSQ

— Thiago Macedo
kaynak

7

Firefox 43.0.4'te test ettim ve çalışmıyor ancak Safari 9 ve Chrome 48'de işe yarıyor gibi görünüyor: cssdesk.com/dbCSQ

— Jason Sperske

6

@JasonSperske tarafından eklenen demo benim için ne Firefox 45'te ne de Chrome 50'de

— çalışmıyor

Demo benim için linux üzerinde chrome 48'de çalışıyor, ancak kendi sayfamdaki aynı css çalışmıyor.

— Mnebuerquo

40

Çözüm, en azından chrome 50 :(

— userlond

4

Bu çözümü unutun: Chrome 74/75, Firefox 63/67, Edge 42, IE 11 ve UCBrowser 7.0 ile çalışmıyor (ancak GNOME Web 3.28 - AppleWebKit / 605.1.15 ile çalışıyor)

— tanguy_k

10

Sen olabilir değil bunun için girişini kullanmak, bunun yerine textarea kullanmak gerekir. Metin alanını wrap="soft"kodla kullanın ve aşağıdaki gibi özelliklerin geri kalanı isteğe bağlıdır:

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

Atributes: "40" karakter örneğin size özelliğini ekleyebilirsiniz bunun metin miktarını sınırlamak için maxlength="40": Böyle <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> kaydırma bunun için stil gizlemek için. Yalnızca kullanırsanız overflow:scroll;veya overflow:hidden;veya overflow:auto;yalnızca bir kaydırma çubuğu için etkileyecektir alacaktır. Her kaydırma çubuğu için farklı öznitelikler istiyorsanız overflow:scroll; overflow-x:auto; overflow-y:hidden;, stil alanında bunun gibi öznitelikleri kullanın : Metin alanını yeniden boyutlandırılamaz hale getirmek için, aşağıdaki resize:none;gibi stili kullanabilirsiniz :

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

Bu şekilde, tam olarak bir giriş metin kutusunun yaptığı gibi çalışan, ancak bunun yerine satırlarla ve girdi metni kullanmadan, kelime kaydırma ve maksimum karakter uzunluğu "40" karakter olan 14 satır ve 10 sütun içeren bir metin alanına sahip olabilir veya örnek olabilirsiniz.

NOT: metin alanı, satırlarla hiç çalışmaması <input type="text" name="tbox" size="10"></input>için yapılan girdilere benzemeyen satırlarla çalışır .

— SeekLoad
kaynak

7

Kaputun altındaki değer tek bir satır dize ancak kullanabileceğiniz bir kelime kaydırma biçiminde kullanıcıya sunulduğu bir metin girişi oluşturmak için contenteditable bir özniteliği <div>veya başka eleman:

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>

Snippet'i genişlet

— Sam Herrmann
kaynak