<İnput type = “text” /> içine birden çok girdi satırı

Bir formda bu metin girişi var:

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

Birden fazla girdi satırı almaya çalışıyorum. Genişlik ve yükseklik kutuyu büyütür, ancak kullanıcı istediği metinleri girebilir, ancak yalnızca bir satırı doldurur.

Girdiyi bir metin alanı gibi nasıl yapabilirim?

Çok satırlı kullanım için bir metin alanı kullanmanız gerekir.

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

Bir metin girişini çok satırlı hale getirerek word-break: break-word;niteliğini vermek mümkündür . (Bunu yalnızca Chrome'da test etti)

Yapamazsın. Yazma sırasında, çok satırlı olarak tasarlanmış tek HTML form öğesi <textarea>.

Metin alanını kullanın

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

açılış ve kapanış etiketleri arasında boşluk bırakmayın Veya Başka Boş satırlar veya boşluklar bırakacaktır.

Şuna göz at:

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

TEXTAREA öğesi çok satırlı metin giriş denetimi oluşturur

textareaÇok satırlı girişleri desteklemek için kullanmalısınız .

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

Otomatik yükseklikte textarea'ya ihtiyacınız varsa , Use kullanın, saf javascript,

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>

Giriş birden fazla satırı desteklemiyor. Bu özelliğe ulaşmak için bir metin alanı kullanmanız gerekir .

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

Hatırlamak o <textarea>var etiketinin içinde değerini değil, Özellikte:

<textarea>INITIAL VALUE GOES HERE</textarea>

Kendi kendine kapalı olamaz: <textarea/>

Daha fazla bilgi için şu adrese bir göz atın bu .

React kullanıyorsanız, material-ui.com kütüphanesi size şu konularda yardımcı olabilir:

  <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

Depolamak için kullanın <div contenteditable="true">( iyi desteklenir ) <input type="hidden">.

HTML:

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

js (jQuery kullanarak)

$("#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
    }
});