`
xp9802
  • 浏览: 1208516 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

让文本框textarea自动适应内容的高度

 
阅读更多

方法一:

<textarea rows=1 cols=40 style='overflow:scroll;overflow-y:hidden;;overflow-x:hidden' 
onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);"></textarea>

方法二:

<script>
var agt = navigator.userAgent.toLowerCase();
var is_op = (agt.indexOf("opera") != -1);
var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_op;
function ResizeTextarea(a,row){
    if(!a){return}
    if(!row)
        row=5;
    var b=a.value.split("\n");
    var c=is_ie?1:0;
    c+=b.length;
    var d=a.cols;
    if(d<=20){d=40}
    for(var e=0;e<b.length;e++){
        if(b[e].length>=d){
            c+=Math.ceil(b[e].length/d)
        }
    }
    c=Math.max(c,row);
    if(c!=a.rows){
        a.rows=c;
    }
}
</script>
<textarea style="overflow: hidden;  font-family: Verdana,Arial; font-style: normal;  font-size: 13px; line-height: normal; " rows="4" cols="30" onfocus="javascript:ResizeTextarea(this,4);" onclick="javascript:ResizeTextarea(this,4);" onkeyup="javascript:ResizeTextarea(this,4);"></textarea>
分享到:
评论

相关推荐

    Vue下textarea文本框根据内容自适应改变高度

    在Vue.js框架中,开发网页应用时,我们经常会遇到需要创建一个可以自动调整高度的textarea元素,以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...

    js+css使文本框自动适应内容的高度.docx

    ### js+css使文本框自动适应内容的高度 在现代网页设计与开发中,用户体验是至关重要的因素之一。其中,表单元素的设计对于提高用户友好度起着重要作用。文本框作为表单中最常用的输入控件之一,其良好的交互体验...

    Javascript 文本框textarea高度随内容自适应增长收缩

    在某些场景下,我们希望文本框的高度能够自动调整,以适应用户输入的内容,即实现高度自适应增长或收缩。本文将详细介绍两种JavaScript实现textarea高度自适应的方法。 ### 方案一 这种方法利用了textarea的`...

    文本框根据输入内容自动调整大小

    `autosize`插件会监听`textarea`的`input`和`propertychange`事件,当检测到内容变化时,会计算新的高度并实时更新文本框的样式。 需要注意的是,`autosize`主要关注高度的调整,宽度通常不会自动改变,因为宽度...

    jquery实现文本框textarea自适应高度

    在网页设计中,为了提供更好的用户体验,经常需要让文本框(textarea)的尺寸根据用户输入的内容自动调整。jQuery 是一个广泛使用的 JavaScript 库,它提供了丰富的功能和便捷的方法来简化DOM操作,包括实现文本框...

    js+css使文本框自动适应内容的高度

    而文本框自动适应内容高度的特性是指文本框能够根据输入内容的多少动态调整自身的高度。这不仅提升了用户交互的体验,还能让页面布局更加灵活和美观。 具体到本主题中提到的实现方式是结合了JavaScript(简称js)和...

    JQ 多行文本框高度变化

    本篇文章将详细探讨"JQ多行文本框高度变化"这一主题,它是前端开发中常见的一种需求,尤其在用户输入多行文本时,确保文本框的高度能够动态适应内容的变化。 在HTML页面中,`&lt;textarea&gt;`元素通常用于创建多行文本...

    jquery 插件实现多行文本框[textarea]自动高度

    总结来说,这个jQuery插件利用`keyup`事件监听用户的输入行为,通过计算行数和行高动态调整`&lt;textarea&gt;`的高度,实现了多行文本框的自动高度适应。这种实现方式避免了引入额外的第三方插件,简化了项目依赖,同时也...

    TextareaAutosize根据内容的大小自动调整Textarea

    这个插件会监听`Textarea`上的`input`和`change`事件,每当用户输入或删除文本时,都会自动调整`Textarea`的高度以适应新的内容。以下是基本的使用步骤: 1. 首先,在HTML中创建一个`Textarea`元素,确保设置好它的...

    jquery----TextArea高度自适应

    代码中通过监听`keyup`、`change`和`focus`事件,实现在文本输入、文本改变或文本框获得焦点时,自动计算并调整TextArea的高度。计算过程如下: - 如果不是IE浏览器,先将TextArea的高度设为0,然后获取`...

    文本框根据输入内容自适应高度的代码

    标题中的“文本框根据输入内容自适应高度的代码”指的是在网页开发中,文本框(textarea)能够自动调整其高度以适应用户输入的内容。这种功能通常用于提高用户体验,避免用户在输入大量文字时需要手动滚动或调整...

    FLEX自动调整大小文本框控件

    总的来说,这个"FLEX自动调整大小文本框控件"是FLEX应用中提高用户体验的一个重要工具,它体现了FLEX的灵活性和可扩展性,让开发者可以轻松地创建响应式且适应性强的文本输入区域。通过深入理解和运用这类组件,...

    jquery实现textarea 高度自适应

    之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 代码如下: jQuery.fn.extend({  autoHeight: function(){  return this.each(function(){  ...

    jQuery实现可自动随着内容的增加自动伸缩的弹性文本框效果.zip

    新的高度是基于当前行数和行高计算的,确保文本框的高度能适应内容的增长,同时不会超过初始高度。 现在,我们只需在页面加载完成后调用这个插件,使我们的文本框具有弹性效果: ```javascript $(document).ready...

    div+css布局中常用方法总结

    1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible" 2、cursor:pointer 使鼠标变成手形 3、word-wrap:break-word;控制是否断词 ......

    textarea用法

    此例中,当输入文本超过10行时,文本框将自动显示滚动条,便于用户查看完整内容。 3. **自定义背景色**: ``` &lt;textarea cols="40" rows="10" name="text" style="background-color:BFCEDC"&gt;&lt;/textarea&gt; ``` ...

    如何为 Element UI 里的 autosize textarea 设置高度

    在Element UI框架中,`autosize`属性用于自动调整`textarea`输入框的高度,以适应用户输入的内容。然而,有时默认的高度可能不满足设计需求。本文将深入探讨如何为Element UI中的`autosize textarea`设置自定义高度...

    html中的textArea使用及实例

    1. **Autosize**:利用JavaScript库如`Textarea Autosize`,可以实现文本框自动调整大小以适应内容。 2. **Markdown**:通过集成Markdown解析器,`textarea`可以支持Markdown语法,提高输入体验。 3. **Validation**...

    JS实现自适应高度表单文本框的方法

    1. 自适应高度的概念:在网页设计中,自适应高度是指某些元素的高度能够根据其内容的多少自动调整,以适应内容量。在本例中,文本框的高度需要根据用户的输入动态变化。 2. 表单文本框的基本知识:在HTML表单中,...

Global site tag (gtag.js) - Google Analytics