Metin alanı yeniden boyutlandırmayı kapat

117

Sitemde metin alanını yeniden boyutlandırmayı kapatmaya çalışıyorum; şu anda bu yöntemi kullanıyorum:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

Yöntemimin doğru olmadığını biliyorum ve JavaScript'te daha iyisini arıyorum. Başlangıç seviyesindeyim, bu nedenle benim için en iyi çözüm HTML5 veya jQuery olacaktır.

html textarea

— sihirbaz
kaynak

254

Yeniden boyutlandırmayı devre dışı bırakmak için bu CSS'yi deneyin

Tüm metin alanları için yeniden boyutlandırmayı devre dışı bırakacak CSS şu şekilde görünür:

textarea {
    resize: none;
}

Bunun yerine, adını tek bir metin alanına atayabilirsiniz (burada metin alanı HTML'dir):

textarea[name=foo] {
    resize: none;
}

Veya kimliğe göre (metin alanı HTML'nin bulunduğu yer):

#foo {
    resize: none;
}

Şuradan alınmıştır: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

— FECO
kaynak

7

Sadece bir çözüme bağlanmak yerine, onu burada biraz açıklamalısınız. Gelecekte bu soruya bakan pek çok kişi, yanıt için bir bağlantıya tıklamaktan rahatsız olmayacak. Buraya biraz ayrıntı ekleyin ve cevabınızı + 1'leyeceğim.

— Jon Egeland

21

bu işini yapacak

  textarea{
        resize:none;
    }

görüntü açıklamasını buraya girin

— Raab
kaynak

8

CSS3 bu sorunu çözebilir. Maalesef günümüzde kullanılan tarayıcıların yalnızca % 60'ında desteklenmektedir .

IE ve iOS için size boyutlandırma kapatamazsınız ancak sınırlayabilir textareaonun ayarlayarak boyut widthve height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Demoyu Gör

— Oriol
kaynak

2

Sadece html sürüklenebilir özniteliğini kullanarak kolayca yapılabilir

<textarea name="mytextarea" draggable="false"></textarea>

Varsayılan değer doğrudur.

— Böyleceitha Wickramasinghe
kaynak

2

Soru, metin alanını yeniden boyutlandırmakla ilgili, sürükleyip bırakmayla değil. Bu nedenle, beklendiği gibi, bu özelliği bir metin alanında ayarlamak Chrome'da işe yaramaz (en azından).

— peveuve

2

Yalnızca bir ekstra seçenek, uygulamadaki tüm metin alanları için varsayılan davranışı geri döndürmek istiyorsanız, aşağıdakileri CSS'nize ekleyebilirsiniz:

textarea:not([resize="true"]) {
  resize: none !important;
}

Yeniden boyutlandırmak istediğiniz yeri etkinleştirmek için aşağıdakileri yapın:

<textarea resize="true"></textarea>

Bu çözümün, desteklemek isteyebileceğiniz tüm tarayıcılarda çalışmayabileceğini unutmayın. Destek listesine resizeburadan bakabilirsiniz : http://caniuse.com/#feat=css-resize

— Darlesson
kaynak

1

Soruya göre cevapları javascript olarak listeledim

TagName Seçilerek

document.getElementsByTagName('textarea')[0].style.resize = "none";

Kimliği Seçerek

document.getElementById('textArea').style.resize = "none";

— Mano
kaynak

0

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

yukarıdaki kod çoğu tarayıcıda çalışır

//HTML:
<textarea id='textarea' draggable='false'></textarea>

maksimum sayıda tarayıcı üzerinde çalışması için ikisini de yapın

— kimse
kaynak

0

Bu benim için çalışıyor

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>

Snippet'i genişlet

— Kordrad
kaynak