17 Soru: Textarea'nın yeniden boyutlandırılabilir özelliği nasıl devre dışı bırakılır?

tarafından oluşturulan soru Fri, Mar 15, 2019 12:00 AM

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

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

 buraya resim açıklamasını girin

    
2401
  1. @ JDIsaaks - ayrıca, bazı durumlarda yeniden boyutlandırmaya izin vermek düzeni ve printabilit'i kırabilir (kritik bir projenin önemli bir yönüdür).
    2012-11-23 19: 35: 00Z
  2. Bazen gerçekten yeniden boyutlandırılamayan bir textarea istiyorsunuz. Örneğin, bu durumda, (koşullu olarak) bir textarea'yı yalnızca etiket gibi görünen bir şeye dönüştürdüğünüzde. Yüzeye rastgele kayan kapmak içeren bir etiketin olması gerçekten garip görünüyor.
    2015-01-21 17: 20: 58Z
17 Yanıtlar                              17                         

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

 
textarea {
  resize: none;
}

textarea s bazılarında devre dışı bırakmak için (ancak tümü değil), bir birkaç seçenek .

textarea özniteliği name (yani, foo) olarak ayarlanmış bir <textarea name="foo"></textarea>'u devre dışı bırakmak için:

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

Veya bir id niteliği kullanarak (ö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, ikisi de , yatay, dikey ve miras:

 
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 düzgün bir uyumluluk sayfasını inceleyin. Jon Hulka'nın yorumladığı gibi, boyutlar maksimum genişlik ve maksimum yükseklik kullanarak CSS'de daha fazla kısıtlanabilir olabilir. minimum genişlik ve minimum yükseklik.
  

Bilmek çok önemli:

     

Taşma özelliği, çoğu öğe için 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'den alıntı,    http://css-tricks.com/almanac/properties/r/resize/

    
3183
2018-06-20 11: 54: 08Z
  1. Firefox, Opera ve /veya IE için bir çözüm var mı?
    2011-03-08 16: 31: 34Z
  2. @ Šime IE ve FF3 (ve önceki sürümler), yeniden boyutlandırma desteği eklemez, bu nedenle onlar için bir çözüme gerek yoktur. FF4 için bu çözüm işe yaramalı.
    2011-03-08 16: 37: 52Z
  3. 2012-11-17 20: 23: 14Z
  4. Bunu öznitelik değil css kullanarak ayarlamanın garip olduğunu bulan tek kişi ben miyim? O zaman neden CSS'yi kullanarak devre dışı bırakılmış veya kontrol edilmiş veya diğer özellikleri ayarlayamıyorum?
    2016-08-08 13: 15: 02Z
  5. @ Buksy Çünkü "disabled" görsel bir özellik değil, bir durumdur. Pers Bir stil dili tarafından karar verilmemesi gerektiği mantıklı.
    2016-09-08 13: 01: 45Z

    CSS’de ...

     
    textarea {
        resize: none;
    }
    
        
    195
    2011-03-08 16: 17: 54Z

    2 şey buldum

    önce

     
    textarea{resize:none}
    

    bu, henüz piyasaya sürülmemiş bir css3'tür Firefox4 + chrome ve safari ile uyumlu

    başka bir format özelliği, kurtulmak için taşma: otomatik 'dir. dir niteliğini

    dikkate alan doğru kaydırma çubuğu

    kodu 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

    resim tanımını buraya girin

    • FF 17.0.1

    resim tanımını buraya girin

    • krom

    resim tanımını buraya girin

        
    99
    2012-12-27 20: 58: 33Z

    CSS3, bunu yapmanıza izin verecek UI öğeleri için yeni bir özelliğe sahiptir. Mülk, yeniden boyutlandırma özelliğidir . Bu nedenle, tüm textarea öğelerinin yeniden boyutlandırılmasını devre dışı bırakmak için stil sayfanıza aşağıdakileri ekleyin:

     
    textarea { resize: none; }
    

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

    Şahsen, textarea unsurları üzerinde yeniden boyutlandırmanın engellenmesini çok can sıkıcı buluyorum. 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 textareayı barındıramazsa, tasarımınızın nasıl çalıştığını yeniden gözden geçirmek isteyebilirsiniz. Herhangi bir kullanıcı tercihinizi geçersiz kılmak için kullanıcı stil sayfasına textarea { resize: both !important; } ekleyebilir.

        
    62
    2014-01-02 13: 45: 55Z
    1. Ancak, texarea'unu yeniden boyutlandırması gereken ve yalnızca
      <textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
      
      'unu yeniden boyutlandırması gereken bir kullanıcı yerine, düzenini kasıtlı olarak kesen bir kullanıcı olurdu. işe yaramayan bir şey
      2019-04-15 12: 35: 38Z
     
    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;
    }
    
        
    22
    2013-11-06 09: 19: 04Z

    Derin desteğe ihtiyacınız varsa eski okul tekniğini kullanabilirsiniz

     resize:none     
    20
    2015-02-12 12: 14: 27Z
    1. Ayrıca, sinir bozucu bir şekilde çalışmayan alt köşede tutamacın görünmesini engellemek için bu çözümle birlikte
      <textarea name="textinput" draggable="false"></textarea>
      
      kullanın.
      2015-07-17 09: 55: 15Z

    Bu, html easy'da yapılabilir

     true

    Bu benim için çalışıyor. draggable özelliği için varsayılan değer resize: none;'dur.

        
    11
    2015-07-22 03: 43: 06Z
    1. Bu bir HTML 5 özelliğidir, bu nedenle yalnızca daha yeni tarayıcılar destekleyecektir. IE'nin 9'dan itibaren desteklediği bir yerde okudum.
      2015-09-08 15: 11: 45Z
    2. Çoğu tarayıcıda çalışıyor. her yeni tarayıcıda.
      2015-11-09 11: 04: 48Z
    3. textarea'nın yeniden boyutlandırılmasını engellemeyecek
      2016-12-27 18: 14: 50Z

    Siz sadece kullanın: CSS'inizde

    textarea { 
      resize: none; 
    }
    
    .
      

    resize özelliği, bir öğenin yeniden boyutlandırılabilir olup olmadığını belirtir   kullanıcı tarafından.

         

    Not: resize özelliği, hesaplanan taşma işlemine sahip öğeler için geçerlidir.   değer, "görünür" den başka bir şeydir.

    Ayrıca, şu anda IE’de desteklenmeyen yeniden boyutlandırma .

    İşte yeniden boyutlandırmak için farklı özellikler:

    Yeniden Boyutlandırma Yok:

     
    textarea { 
      resize: both; 
    }
    

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

     
    textarea { 
      resize: vertical; 
    }
    

    Dikey olarak yeniden boyutlandır:

     
    textarea { 
      resize: horizontal; 
    }
    

    Yatay olarak yeniden boyutlandır:

     width

    Ayrıca, CSS’inizde veya HTML’nizde height ve

    resize: none;
    
    ’unuz varsa, daha geniş bir tarayıcı desteği ile, yazı karakterinizin yeniden boyutlandırılmasını önler.     
    6
    2017-06-03 18: 15: 53Z

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

     
    <textarea style="resize: none;"></textarea>
    
    • Bunu, bunun gibi bir satır içi stil özelliği olarak uygulayabilirsiniz:

       <style>...</style>
    • veya şu gibi

      textarea {
          resize: none;
      }
      
      öğe etiketi arasında:  textarea
    5
    2018-05-10 13: 19: 46Z

    CSS3 bu sorunu çözebilir. Maalesef şu anda yalnızca kullanılmış tarayıcıların% 60’ı üzerinde destekleniyor.

    IE ve iOS için yeniden boyutlandırmayı kapatamazsınız, ancak width ve height’u ayarlayarak

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

    Demoya Bakın

        
    3
    2015-11-01 20: 58: 45Z

    Bunun gibi textarea'ı devre dışı bırakma özelliğini basitçe uygulayabilirsiniz:

     
    resize: vertical;
    

    dikey veya yatay yeniden boyutlandırmayı devre dışı bırakmak için kullanın

     
    resize: horizontal;
    

    veya

     
    #foo {
        resize: none;
    }
    <textarea rows="4" cols="50" name="foo" id="foo">
    Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
    </textarea>
        
    3
    2018-05-28 07: 09: 56Z

    şunu dene:

     @style
        
    1
    2018-07-05 09: 59: 53Z

    (resize: none;) ile özel bir boyut verebilir ve

    @Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
    
    yeniden boyutlandırma özelliğini devre dışı bırakabilirsiniz.  
    width:325px !important; height:120px !important; outline:none !important;
    
        
    1
    2018-08-30 19: 21: 48Z
    1. Merhaba, cevabınız için teşekkürler, bir dahaki sefere lütfen kodu biçimlendirin.
      2018-08-30 16: 33: 43Z
    2. Bu, asp.net MVC tabanlı bir cevaptır. Çok hoş.
      2018-12-27 15: 23: 48Z

    Ekleme! önemli işe yarıyor:

     !important

    anahat yalnızca belirli tarayıcıdaki mavi anahattan kaçınmak içindir

        
    0
    2014-02-03 19: 07: 36Z
    1. resize: none niteliğini kötüye kullanma. Genişliği ve amp; sabitlemek için anlamsız CSS özniteliği
      textarea {
          resize: none;
      }
      
      yeniden boyutlandırma özelliğini kaldırabilirse yükseklik
      2016-04-05 03: 44: 34Z

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

     textarea

    Belirli bir name için yeniden boyutlandırmayı devre dışı bırakmak için Bir öznitelik id veya noresize ekleyin ve bir şeye ayarlayın. Bu durumda,

    <textarea name='noresize' id='noresize'> </textarea>
    
    olarak adlandırılır.  
    /*  using the attribute name */
    textarea[name=noresize]{
    resize: none;
    }
    /* or using the id */
    
    #noresize{
    resize: none;
    }
    

    CSS

     
    $('textarea').css("resize", "none");
    
        
    0
    2016-10-25 08: 19: 12Z

    Ayrıca jQuery ile deneyebilirsiniz

     
    .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>
        
    0
    2016-12-15 08: 15: 16Z
    1. daha fazla jquery kullanın . Yeterince kullanmıyorsun. :)
      2018-06-25 10: 01: 40Z

    Yeniden boyutlandırma özelliklerinin nasıl çalıştığını göstermek için küçük bir demo oluşturdum. Umarım size ve diğerlerine de yardımcı olur.

     
        
    0
    2019-06-13 05: 18: 22Z
kaynak yerleştirildi İşte