Bir metin alanının yeniden boyutlandırılabilir özelliğini nasıl devre dışı bırakabilirim?

2649

Bir yeniden boyutlandırılabilir özelliğini devre dışı bırakmak istiyorum textarea.

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

html css

— user549757
kaynak

4

@JDIsaaks - ayrıca, belirli durumlarda yeniden boyutlandırmaya izin vermek düzeni ve yazdırılabilirliği bozabilir (mevcut kritik bir projenin önemli bir yönü).

— random_user_name

10

Bazen gerçekten yeniden boyutlandırılamayan bir metin alanı istersiniz. Örneğin, bu durumda, (şartlı olarak) bir tek kelimeyi etiket gibi görünen bir şeye dönüştürdüğünüzde. Bir tarafa rastgele yüzen bir kapmak yolu olan bir etikete sahip olmak gerçekten tuhaf görünüyor.

— neminem

2

İyi olan her şeyin aşkı için, lütfen bunu gerçek bir metin alanında yapmayın yoksa güç kullanıcılarınızı yabancılaştıracaksınız. Temel tarayıcı işlevinin kırılması nükleer bir seçenek olarak düşünülmelidir.

— superluminary

3531

Aşağıdaki CSS kuralı, textareaöğeler için yeniden boyutlandırma davranışını devre dışı bırakır :

textarea {
  resize: none;
}

(Hepsi değil) bazıları için onu devre dışı bırakmak için textarea, bir var s seçeneklerin çift .

Bir özgü devre dışı bırakmak için textareabirlikte nameiçin öznitelik kümesi foo(yani <textarea name="foo"></textarea>):

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

Veya, bir idöznitelik (yani <textarea id="foo"></textarea>) kullanarak :

#foo {
  resize: none;
}

W3C sayfa hiçbiri, hem yatay, dikey ve devralma: kısıtlamalarını boyutlandırma için listeler olası değerler:

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

Şu anda hangi tarayıcıların bu özelliği desteklediğini görmek için iyi bir uyumluluk sayfasını inceleyin . Jon Hulka'nın yorumladığı gibi, boyutlar maksimum genişlik, maksimum yükseklik, minimum genişlik ve minimum yükseklik kullanılarak CSS'de daha da kısıtlanabilir .

Bilmek çok önemli:

Bu özellik, overflow özelliği görünür olandan başka bir şey değilse, çoğu öğe için varsayılan değilse hiçbir şey yapmaz. Genel olarak bunu kullanmak için taşma gibi bir şey ayarlamanız gerekir: scroll;

Sara Cope'den alıntı, http://css-tricks.com/almanac/properties/r/resize/

— Tatlı çörek
kaynak

Firefox, Opera ve / veya IE için bir çözüm var mı?

— Šime Vidas

6

@ Šime IE ve FF3 (ve öncesi) destek yeniden boyutlandırma eklemez, bu nedenle onlar için bir çözüme gerek yoktur. FF4 için bu çözüm işe yaramalıdır.

— Donut

24

göre davidwalsh.name/textarea-resize - yeniden boyutlandır: dikey veya yeniden boyutlandır: yatay bir boyutu yeniden boyutlandırma kısıtlamak için. Veya maksimum genişlik, maksimum yükseklik, minimum genişlik ve minimum yükseklikten herhangi birini kullanın.

— Jon Hulka

3

Bunu öznitelikleri değil css kullanarak ayarlamak garip bulan tek kişi miyim? Daha sonra neden CSS kullanarak devre dışı bırakılmış veya işaretlenmiş veya diğer özellikleri ayarlayamıyorum ...

— Buksy

6

@Buksy Çünkü "devre dışı" görsel bir özellik değil, bir durumdur. Bu yüzden bir stil dili tarafından kararlaştırılmaması mantıklıdır .

— Kroltan

206

CSS'de ...

textarea {
    resize: none;
}

— Jeff Parker
kaynak

105

İki şey buldum:

İlk

textarea{resize: none}

Bu, henüz yayınlanmamış bir Firefox 4 (ve üstü), Chrome ve Safari ile uyumlu bir CSS 3'tür .

Başka bir biçim özelliği, dir niteliğini overflow: autodikkate alarak sağ kaydırma çubuğundan kurtulmaktır .

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

Internet Explorer 8

Resim açıklamasını buraya girin

Firefox 17.0.1

Resim açıklamasını buraya girin

Krom

Resim açıklamasını buraya girin

— Rami Jamleh
kaynak

62

CSS 3, UI öğeleri için bunu yapmanızı sağlayacak yeni bir özelliğe sahiptir. Özellik, yeniden boyutlandırma özelliğidir . Böylece, tüm metin alanı öğelerinin yeniden boyutlandırılmasını devre dışı bırakmak için stil sayfanıza aşağıdakileri eklersiniz:

textarea { resize: none; }

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

Şahsen, textarea unsurlarında yeniden boyutlandırmanın devre dışı bırakılmasını çok can sıkıcı bulurdum. Bu, tasarımcının kullanıcının istemcisini "kırmaya" çalıştığı durumlardan biridir. Tasarımınız daha büyük bir metin alanını barındıramazsa, tasarımınızın nasıl çalıştığını yeniden düşünmek isteyebilirsiniz. Herhangi bir kullanıcı ekleyebilirtextarea { resize: both !important; } tercihinizi geçersiz kılmak için kullanıcı stil sayfasına .

— James Sumners
kaynak

Ancak bu, yalnızca yeniden boyutlandırması gereken ve işe yaramayan bir şey yapan bir kullanıcı yerine, düzenini kasıtlı olaraktexarea

— kıracaktır

25

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

— İmtiaz Ali Baigal
kaynak

21

Derin desteğe ihtiyacınız varsa, eski bir okul tekniği 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;
}

— yevgeniy
kaynak

7

Ayrıca resize:nonebu çözümle, alt köşede tutamağın sinir bozucu bir şekilde çalışmadığını önlemek için kullanın .

— MacroMan

13

Bu HTML'de kolayca yapılabilir:

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

Bu benim için çalışıyor. Varsayılan değer trueiçin draggableöznitelik.

— Böylece, Wickramasinghe
kaynak

Bu bir HTML 5 özelliğidir, bu nedenle yalnızca daha yeni tarayıcılar desteklenir. IE 9'dan itibaren desteklediği bir yerde okudum.

— Antony D'Andrea

4

Bu, çoğu tarayıcıda çalışır. her tarayıcıda.

— Thusitha Wickramasinghe

textarea'nın yeniden boyutlandırılmasını engellemez

— Mishko Vladimir

@ AntonyD'Andrea Bu en son Chrome'da çalışmıyor: jsfiddle.net/ps2v8df9

— Advait Junnarkar

6

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

resize: none;

Bunu şu şekilde satır içi stil özelliği olarak uygulayabilirsiniz:
```
<textarea style="resize: none;"></textarea>
```
veya şu şekilde <style>...</style>öğe etiketleri arasında :
```
textarea {
    resize: none;
}
```

— Webeng
kaynak

6

resize: none;CSS'nizde sadece şunu kullanırsınız .

Boyutlandırma özelliği belirtir bir eleman Kullanıcı boyutunu olup olmadığını.

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

Ayrıca yeniden boyutlandırma şu anda Internet Explorer'da desteklenmemektedir.

Yeniden boyutlandırma için farklı özellikler şunlardır:

Yeniden Boyutlandırma Yok:

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

Dikey olarak yeniden boyutlandır:

textarea {
  resize: vertical;
}

Yatay olarak yeniden boyutlandır:

textarea {
  resize: horizontal;
}

Ayrıca varsa widthve heightsizin CSS veya HTML, daha geniş bir tarayıcılar desteği ile, sizin textarea yeniden boyutlandırılır önleyecektir.

— Alireza
kaynak

3

CSS 3 bu sorunu çözebilir. Ne yazık ki, günümüzde kullanılan tarayıcıların yalnızca % 60'ında desteklenmektedir .

Internet Explorer ve iOS için size yeniden 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 */

Demoya Bakın

— Oriol
kaynak

3

Sadece edebilirsiniz textarea devre dışı böyle özellik:

textarea {
    resize: none;
}

Dikey veya yatay yeniden boyutlandırmayı devre dışı bırakmak için

resize: vertical;

veya

resize: horizontal;

— Peter Mortensen
kaynak

2

Yeniden boyutlandırma özelliklerinin nasıl çalıştığını göstermek için küçük bir demo oluşturdum. Umarım size ve başkalarına da yardımcı olacaktır.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

Snippet'i genişlet

— Ambuj Khanna
kaynak

1

İle @styleözel bir boyut verebilir ve yeniden boyutlandırma özelliğini devre dışı bırakabilirsiniz (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

— Carlos de Jesus Baez
kaynak

1

Merhaba, Cevabınız için teşekkürler, bir dahaki sefere kodu biçimlendirin.

— Baptiste Mille-Mathias

Bu asp.net MVC tabanlı cevaptır. Çok hoş.

— yogihosting

0

JQuery ile de deneyebilirsiniz

$('textarea').css("resize", "none");

— Santosh Khalse
kaynak

3

Daha fazla jquery kullanmalısınız . Yeterince kullanmıyorsunuz. :)

— Filip Savic

1

Bu bir mem - örneğin, "Bunu tamamen bırakmalı ve jQuery'yi denemelisiniz." .

— Peter Mortensen

0

Tümü için yeniden boyutlandırmayı devre dışı bırakmak için textarea:

textarea {
    resize: none;
}

Belirli bir boyutta yeniden boyutlandırmayı devre dışı bırakmak için textareabir özellik nameveyaid ve bunu bir şeye ayarlayın. Bu durumda, adlandırılırnoresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}

— Abk
kaynak

-2

Eklemek !importantonu çalıştırır:

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

outline sadece belirli tarayıcılarda mavi çerçeveden kaçınmaktır.

— kaelds
kaynak

6

!importantÖzniteliği kötüye kullanmayın . CSS özelliği resize: noneyeniden boyutlandırma özelliğini kaldırabilirse genişliği ve yüksekliği düzeltmek için anlamsızdır

— Raptor

1

!importantKötü değil mi?

— Peter Mortensen

Mevcut Chrome'da bu yatay yeniden boyutlandırmayı durduruyor, ancak yine de textarea'yı dikey olarak yeniden boyutlandırabilirim.

— Advait Junnarkar