Soru Textarea'nın resizable özelliği nasıl devre dışı bırakılır?


Bir resmetable özelliğini devre dışı bırakmak istiyorum textarea.

Şu anda, yeniden boyutlandırabilirim textarea sağ alt köşesine tıklayarak textarea ve fareyi sürükleyerek. Bunu nasıl devre dışı bırakabilirim?


2162
2018-03-08 16:15


Menşei


@JDIsaacks. Katılmıyorum. Bir kullanıcının metin kutularından ve düğmelerden gelen özel stilleri kaldırmasını gerçekten kolaylaştırmak gibi bir şey. Bu benim sitem ve bu benim tasarımım. Windows / mac / etc gibi görünmesini istemiyorum, uygulamanın MY / site gibi görünmesini istiyorum. - Paul Fleming
@JDIsaaks - ayrıca, belirli durumlarda yeniden boyutlandırmaya izin vermek, yerleşimi ve printabilit'i (mevcut kritik görev projesinin önemli bir yönü) kırabilir. - cale_b
Bazen gerçekten yeniden boyutlandırılamaz bir textarea istersiniz. Örneğin, bu durumda, (şartlı olarak) bir textarea'yı bir etikete benzeyen bir şeye dönüştürdüğünüzde. Tarafına rastgele yüzen kapmak yolu ile bir etiket olması gerçekten garip görünüyor. - neminem
@Gherman Benim düşünceme göre yazılım tasarımı en üst düzey sanat formlarından biridir ve kitap benzetmeniz hiç bir anlam ifade etmemektedir. - quemeful


Cevaplar:


Aşağıdaki CSS kuralı, yeniden boyutlandırma davranışını devre dışı bırakıyor textarea elementler:

textarea {
  resize: none;
}

Bazıları (ancak hepsi değil) devre dışı bırakmak için textareas, bir var seçeneklerin bir çift.

Belirli bir özelliği devre dışı bırakmak için textarea ile name özellik ayarlandı foo (Yani, <textarea name="foo"></textarea>):

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

Ya da id özellik (ör. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

W3C sayfası kısıtlamaların yeniden boyutlandırılması için olası değerleri listeler: hiçbiri, yatay, dikey ve devralma yok:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

İyi bir inceleme uyumluluk sayfası hangi tarayıcıların şu anda bu özelliği desteklediğini görmek için Jon Hulka'nın yorumladığı gibi, boyutlar daha fazla kısıtlanmış Maksimum genişlik, maksimum yükseklik, min genişlik ve min yükseklik kullanarak CSS'de.

Bilinmesi çok önemli:

Taşma özelliği, çoğu öğenin varsayılanı olan görünürden başka bir şey olmadıkça, bu özellik hiçbir şey yapmaz. Genelde bunu kullanmak için, taşma gibi bir şey ayarlamanız gerekir: kaydırma;

Chris Coyier tarafından alıntı,    http://css-tricks.com/almanac/properties/r/resize/


2872
2018-03-08 16:17



Firefox, Opera ve / veya IE için bir çözüm var mı? - Šime Vidas
@ Šime IE ve FF3 (ve daha eski), yeniden boyutlandırma desteği eklemez, bu nedenle onlar için bir çözüm gerekli değildir. FF4 için bu çözüm işe yaramalı. - Donut
göre davidwalsh.name/textarea-resize - yeniden boyutlandırmayı kullan: dikey veya yeniden boyutlandırma: bir boyuta yeniden boyutlandırmayı sınırlamak için yatay. Ya da max-width, max-height, min-width ve min-height herhangi birini kullanın. - Jon Hulka
Bunu css kullanarak değil, öznitelikleri kullanarak ayarlamak garip olan tek kişi ben miyim? Neden CSS kullanarak devre dışı bırakılmış veya işaretli veya diğer özellikleri ayarlayamıyorum ... - Buksy
@Buksy "Devre dışı" bir durum değil, görsel bir özelliktir. Dolayısıyla, bir karar vermemesi mantıklıdır. stil dil. - Kroltan


CSS’de ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Ben şahsen bu cevabı daha çok seviyorum. Diyeceğim şey şu ki. - quemeful


2 şey buldum

ilk

textarea{resize:none}

bu bir css3 henüz serbest değil ile uyumlu Firefox4 + krom ve safari 

başka bir format özelliği taşma: otomatik Doğru kaydırma çubuğundan kurtulmak için dir nitelik

kod ve farklı tarayıcılar

Temel html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Bazı tarayıcılar

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • krom

enter image description here


91
2017-12-27 20:58





CSS3, bunu yapmanıza izin verecek UI öğeleri için yeni bir provaya sahiptir. Mülkiyet özelliği yeniden boyutlandır. Böylece, tüm textarea öğelerinin yeniden boyutlandırılmasını devre dışı bırakmak için aşağıdakileri stil sayfanıza eklersiniz:

textarea { resize: none; }

Bu bir CSS3 özelliğidir; kullanın uyumluluk tablosu tarayıcı uyumluluğunu görmek için

Şahsen ben, textarea unsurları üzerinde yeniden boyutlandırma devre dışı bırakmak çok can sıkıcı bulabilirim. Bu, tasarımcının kullanıcının müşterisini "kırmaya" çalıştığı durumlardan biridir. Tasarımınız daha büyük bir textarea barındıramazsa, tasarımınızın nasıl çalıştığını yeniden gözden geçirmek isteyebilirsiniz. Herhangi bir kullanıcı ekleyebilir textarea { resize: both !important; } tercihinizi geçersiz kılmak için kullanıcı stil sayfalarına.


57
2018-03-08 16:35





<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

19
2017-11-06 09:19





Eğer derin desteğe ihtiyacınız varsa eski okul tekniğini kullanabilirsiniz

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

18
2018-02-12 12:14



Ayrıca kullan resize:none Bu çözüm ile alt köşede görünen ve rahatsız edici şekilde çalışmayan tutamacı engellemek için. - MacroMan


Bu html kolay yapılabilir

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

Bu benim için çalışıyor. Varsayılan değer true için draggable bağlıyor.


9
2017-07-21 05:18



Bu bir HTML 5 özniteliğidir, bu nedenle yalnızca yeni tarayıcılar destekleyecektir. Bir yerde okudum IE 9'dan itibaren destekliyor. - Antony D'Andrea
Bu çoğu tarayıcıda çalışıyor. her yeni tarayıcıda. - Thusitha Wickramasinghe
textarea'nın yeniden boyutlandırılmasını engellemez - Mishko Vladimir


Sadece şunu kullanın: resize: none; senin CSS'de.

boyutlandırmak özellik, bir öğenin yeniden boyutlandırılıp özelleştirilemeyeceğini belirtir   kullanıcı tarafından.

Not: Yeniden boyutlandırma özelliği, hesaplanan taşma değeri olan öğeler için geçerlidir.   değer "görünür" dışında bir şeydir.

Ayrıca boyutlandırmak şu anda IE'de desteklenmiyor.

Yeniden boyutlandırmak için farklı özellikler aşağıdadır:

Yeniden Boyutlandır Yok:

textarea { 
  resize: none; 
}

Her iki yolu da yeniden boyutlandır (dikey ve yatay olarak):

textarea { 
  resize: both; 
}

Dikey olarak yeniden boyutlandır:

textarea { 
  resize: vertical; 
}

Yatay olarak yeniden boyutlandır:

textarea { 
  resize: horizontal; 
}

Eğer varsa width ve height CSS veya HTML'nizde, daha geniş bir tarayıcı desteği ile textarea'nızın yeniden boyutlandırılmasını engeller.


4
2018-06-01 13:11





Yeniden boyutlandırma özelliğini devre dışı bırakmak için aşağıdaki CSS özelliğini kullanın:

resize: none;
  • Bunu satır içi stil özelliği olarak şöyle uygulayabilirsiniz:

    <textarea style="resize: none;"></textarea>
    
  • veya arasında <style>...</style> öğe etiketleri şöyle:

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43





CSS3 bu sorunu çözebilir. Maalesef sadece destekleniyor Kullanılan tarayıcıların% 60'ı şu günlerde.

IE ve iOS için yeniden boyutlandırmayı kapatamazsınız ancak textarea ayarlayarak boyut width ve height.

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

Demo'ya bakın


2
2017-10-30 23:26





Eklemek önemli: çalışmasını sağlar:

width:325px !important; height:120px !important; outline:none !important;

Anahat, belirli tarayıcıdaki mavi çizgiden kaçınmak içindir


0
2018-02-03 19:07



Kötüye kullanmayın !important bağlıyor. CSS özelliği genişliğini ve yüksekliğini düzeltmek anlamsız resize: none yeniden boyutlandırma özelliğini kaldırabilir - Raptor