17 题: 如何禁用textarea的resizable属性?

在...创建的问题 Fri, Mar 15, 2019 12:00 AM

我想禁用textarea的可调整大小属性。

目前,我可以通过点击textarea的右下角并拖动鼠标来调整textarea的大小。如何禁用此功能?

    
2401
  1. @ JDIsaaks - 此外,允许在某些情况下调整大小可能会破坏布局和原理(当前任务关键型项目的一个重要方面)。
    2012-11-23 19:35:00Z
  2. 有时你真的想要一个不可调整大小的textarea。例如,在这种情况下,当您(有条件地)将textarea转换为看起来像标签的东西时。如果标签上有一个随机浮动抓取器,那么看起来真的很奇怪。
    2015-01-21 17:20:58Z
  3. 醇>
    17答案                              17 跨度>                         

    以下CSS规则禁用 textarea 元素的大小调整行为:

     
    textarea {
      resize: none;
    }
    

    要为某些(但不是全部)textarea禁用它,有一个几个选项

    要禁用textarea属性设置为name(即foo)的特定<textarea name="foo"></textarea>

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

    或者,使用id属性(即<textarea id="foo"></textarea>):

     
    #foo {
      resize: none;
    }
    

    W3C页面列出了调整限制大小的可能值:无,两者都是,水平,垂直和继承:

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

    查看体面的兼容性页面,了解当前支持此功能的浏览器。正如Jon Hulka评论的那样,尺寸可以使用max-width,max-height在CSS中进一步限制,最小宽度和最小高度。

      

    知道非常重要:

         

    除非overflow属性不是可见的,否则此属性不执行任何操作,这是大多数元素的默认属性。所以一般来说,使用它,你必须设置像overflow:scroll;

    这样的东西      

    Chris Coyier引用,    http://css-tricks.com/almanac/properties/r/resize/一>

        
    3183
    2018-06-20 11:54:08Z
    1. Firefox,Opera和/或IE是否有解决方案?
      2011-03-08 16:31:34Z
    2. @ŠimeIE和FF3(及更早版本)不添加支持调整大小,因此不需要为它们提供解决方案。对于FF4,此解决方案应该有效。
      2011-03-08 16:37:52Z
    3. 根据 davidwalsh.name/textarea-resize - 使用resize:vertical或resize:horizo​​ntal来约束调整大小到一个维度。或者使用max-width,max-height,min-width和min-height中的任何一个。
      2012-11-17 20:23:14Z
    4. 我是唯一一个发现使用css而不是属性来设置它的人很奇怪吗?为什么我不能使用CSS ...
      设置禁用或检查或其他属性
      2016-08-08 13:15:02Z
    5. @ Buksy因为“禁用”是状态,而不是视觉属性。因此,这是合乎逻辑的它不应该由样式语言决定。
      2016-09-08 13:01:45Z
    6. 醇>

    在CSS ...

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

    我发现了两件事

    首先

     
    textarea{resize:none}
    

    这是一个尚未发布的css3 Firefox4 + chrome和safari兼容

    另一种格式功能是 overflow:auto 摆脱右侧滚动条考虑了 dir 属性

    代码和不同的浏览器

    基本HTML

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

    某些浏览器

    • IE8

    • FF 17.0.1

    • chrome

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

    CSS3有一个新的UI元素属性,可以让你这样做。该属性是调整大小属性。因此,您需要在样式表中添加以下内容以禁用所有textarea元素的大小调整:

     
    textarea { resize: none; }
    

    这是一个CSS3属性;使用兼容性图表查看浏览器兼容性。

    就个人而言,我觉得在textarea元素上禁用resize非常烦人。这是设计师试图“打破”用户客户端的情况之一。如果您的设计无法容纳更大的文本区域,您可能需要重新考虑设计的工作方式。任何用户都可以将textarea { resize: both !important; }添加到他们的用户样式表中以覆盖您的偏好。

        
    62
    2014-01-02 13:45:55Z
    1. 但那将是用户故意打破他们的布局,而不是只需要调整他/她的texarea并最终制作的用户不起作用的东西
      2019-04-15 12:35:38Z
    2. 醇>
     
    <textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
    
        
    22
    2013-11-06 09:19:04Z

    如果您需要深度支持,可以使用旧式技术

     
    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;
    }
    
        
    20
    2015-02-12 12:14:27Z
    1. 也使用resize:none这个解决方案来防止出现在底角的手柄令人沮丧地无效。
      2015-07-17 09:55:15Z
    2. 醇>

    这可以在html easy

    中完成  
    <textarea name="textinput" draggable="false"></textarea>
    

    这对我有用。 true属性的默认值为draggable

        
    11
    2015-07-22 03:43:06Z
    1. 这是一个HTML 5属性,因此只有较新的浏览器才支持。我读过IE从9开始就支持它。
      2015-09-08 15:11:45Z
    2. 这适用于大多数浏览器。在每个最新的浏览器中。
      2015-11-09 11:04:48Z
    3. 它不会阻止textarea调整大小
      2016-12-27 18:14:50Z
    4. 醇>

    您只需在CSS中使用:resize: none;

      

    resize 属性指定元素是否可调整大小   由用户。

         

    注意: resize属性适用于计算溢出的元素   价值不是“可见的”。

    目前IE不支持调整大小

    以下是调整大小的不同属性:

    没有调整大小:

     
    textarea { 
      resize: none; 
    }
    

    调整两种方式(垂直和水平):

     
    textarea { 
      resize: both; 
    }
    

    垂直调整大小:

     
    textarea { 
      resize: vertical; 
    }
    

    横向调整大小:

     
    textarea { 
      resize: horizontal; 
    }
    

    此外,如果你的CSS或HTML中有widthheight,它将阻止你的textarea调整大小,并支持更广泛的浏览器。

        
    6
    2017-06-03 18:15:53Z

    要禁用resize属性,请使用以下CSS属性:

     
    resize: none;
    
    • 您可以将其应用为内联样式属性,如下所示:

       
      <textarea style="resize: none;"></textarea>
      
    • <style>...</style>个元素标签之间如下:

       
      textarea {
          resize: none;
      }
      
    5
    2018-05-10 13:19:46Z

    CSS3可以解决这个问题。不幸的是,现在只支持 60%的已使用浏览器

    对于IE和iOS,您无法关闭调整大小,但可以通过设置textareawidth来限制height尺寸。

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

    参见演示

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

    您可以像这样禁用textarea 属性:

     
    textarea{
        resize: none;
    }
    

    要停用垂直水平调整大小,请使用

     
    resize: vertical;
    

     
    resize: horizontal;
    
        
    3
    2018-05-28 07:09:56Z

    试试这个:

     
    #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>
        
    1
    2018-07-05 09:59:53Z

    使用@style,您可以为其指定自定义尺寸并禁用调整大小功能(resize: none;)

     
    @Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
    
        
    1
    2018-08-30 19:21:48Z
    1. 您好,感谢您的回答,下次请格式化代码。
      2018-08-30 16:33:43Z
    2. 这是基于asp.net MVC的答案。非常好。
      2018-12-27 15:23:48Z
    3. 醇>

    添加!important使其有效:

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

    大纲只是为了避免某些浏览器上的蓝色轮廓

        
    0
    2014-02-03 19:07:36Z
    1. 不要滥用!important属性。无法修复宽度和宽度高度,如果CSS属性resize: none可以删除调整大小功能
      2016-04-05 03:44:34Z
    2. 醇>

    禁用所有textarea的调整大小

     
    textarea {
        resize: none;
    }
    

    禁用特定textarea的调整大小 添加属性nameid并将其设置为某个值。在这种情况下,它被命名为noresize

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

    CSS

     
    /*  using the attribute name */
    textarea[name=noresize]{
    resize: none;
    }
    /* or using the id */
    
    #noresize{
    resize: none;
    }
    
        
    0
    2016-10-25 08:19:12Z

    您也可以尝试使用jQuery

     
    $('textarea').css("resize", "none");
    
        
    0
    2016-12-15 08:15:16Z
    1. 你应该使用更多jquery 。你没有充分使用它。 :)
      2018-06-25 10:01:40Z
    2. 醇>

    我创建了一个小型演示来展示resize属性的工作原理。我希望它也能帮助你和其他人。

     
    .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
    2019-06-13 05:18:22Z
来源放置 这里