让文本框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>

原文地址:https://www.cnblogs.com/zhehang/p/11442376.html

时间: 2024-07-31 08:58:02

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

js同步获取文本框textarea输入的内容

<textarea name="" cols="" rows="" class="loe_hk10" id="eml" onkeyup="SwapTxt()"></textarea>   <p id="lyny"> </p><!--//这个地方是同步显示内容的 --> <script type=&quo

CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求. 最近项目中要求把得到的后端json数据如下图展示给客户,还需要可编辑的功能,于是就用到了CodeMirror这款插件,经过初步的探索,发现它主题样式非常靓丽,简单美观,效果图如下: 下面我就一步一步说明我的使用过程. 1.首先需要下载codemirror插件,先创建文件夹,下载插件 np

jquery文本框textarea自适应高度

浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储.  demo演示 原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

.Net常用技巧_TextBox文本框限制输入的内容

1,限制只能输入数字 private void txtSize_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar != 8 && e.KeyChar != 13 && !char.IsDigit(e.KeyChar) && e.KeyChar != 46) { MessageBox.Show("请输入数字"); e.Handled = true; } } 2,限制只能

禁止多行文本框textarea拖拽

禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 horizontal 只允许水平方向缩放 vertical 只允许垂直方向缩放

【CSS】隐藏多行文本框Textarea在IE中的垂直滚动条

在<[CSS]禁止Google浏览器允许定义调整多行文本框>(点击打开链接)中已经提及过如何使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea在IE中也存在一些样式上的缺陷了. 一个普通的,没有加任何定义的文本框,如下: <textarea cols="30" rows="3"></textarea> 其在IE的效果就如同左侧一样,在没有输入任何文字,就出现垂直滚动条很不雅观,尤其是在

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

<div class="form-group">     <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label>     <div class="col-sm-9">         <textarea class="col-sm-8" i

对文本框中输入的内容放大显示和格式化

在最近做的项目中,发现用户在输入手机号.身份证或者银行卡这些重要的数据的时候,文本框显示的文字不是非常大,也不是非常明显的显示给用户. 往往这些重要数据用户都需要核对好几次,在确保正确无误的时候才敢点击保存,这样总会浪费一点时间,对用户的体验也不是非常友好,如果我们能在用户输入框的上面对输入的内容进行放大.颜色突出并且按照不同的分隔显示,是不是这样更能便于用户快速的核实数据呢. 于是自己利用业务时间就动手封装了一个小插件: 第一步:创建一个样式表sytle.css 1 @charset "utf