文本输入框自适应高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<TITLE>文本框textarea高度自适应增长/伸缩</TITLE>

</HEAD>

<BODY>

<textarea id="txtContent1" rows="5" cols="50" onkeyup="ResizeTextarea(1)" style="overflow-y:hidden;resize: none;">Textarea高度随内容自适应地增长,无滚动栏

</textarea>

<script type="text/javascript">

// 最小高度

var minRows = 5;

// 最大高度。超过则出现滚动栏

var maxRows = 60;

function ResizeTextarea(index) {

var t = document.getElementById(‘txtContent‘ + index);

if (t.scrollTop == 0) t.scrollTop = 1;

while (t.scrollTop == 0) {

if (t.rows > minRows)

t.rows--;

else

break;

t.scrollTop = 1;

if (t.rows < maxRows)

t.style.overflowY = "hidden";

if (t.scrollTop > 0) {

t.rows++;

break;

}

}

while (t.scrollTop > 0) {

if (t.rows < maxRows) {

t.rows++;

if (t.scrollTop == 0) t.scrollTop = 1;

} else {

t.style.overflowY = "auto";

break;

}

}

}

</script>

</BODY>

</HTML>

自增前:

自增后:

时间: 2024-10-18 18:00:00

文本输入框自适应高度的相关文章

文本图片自适应高度小bug以及解决办法

自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中 点击效果: 注:- (void)layoutSubviews 方法不能同时操作,否则会出现cell的高度错乱 显示: 点击:

文本域自适应(textarea)

文本域自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本域自适应高度(模拟有道词典..)</title> <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.min

textarea文本域的高度随内容的变化而变化

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class="t_area"> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先,原则上实现textarea自适应必须

基于jquery的文本域自适应功能

近日在写一个文本域自适应高度的功能,在网上发现一个效果比较好的方法.自己扩展了这个方法,现在分享给大家,有需要的朋友可以试一下,话不多说上代码. 1 $.fn.autoHeight = function(val) { 2 3 function autoHeight(elem) { 4 elem.style.height = 'auto'; 5 elem.scrollTop = 0; //防抖动 6 elem.style.height = elem.scrollHeight + 'px'; 7 }

html5 textarea 文本框根据输入内容自适应高度

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框根据输入内容自适应高度</title> <style type="t

怎样让自定义Cell的图片和文本自适应高度

Let's do it! 首先创建一个Model类 包括一个图片名称属性 还有文字内容属性 #import <Foundation/Foundation.h> @interface Model : NSObject @property (nonatomic, copy) NSString *imageName; @property (nonatomic, copy) NSString *info; @end 创建一个继承于UITableViewCell的MyTableViewCell,把模型作

textarea自适应高度

最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个textarea,其中一个textarea设置其absolute,设置其不可见.当输入文本的textarea的值变化时,将原本的textarea中的值copy到新的 textarea中,这样可以准确计算高度(注意在copy节点的时候新旧textarea的宽度是一样的). 为什么不直接用原textarea

jquery iframe取得元素与自适应高度

总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在iframe子页面获取父页面元素 $('#objId', parent.document); 在iframe子页面获取父页面元素 代码如下:  代码如下 复制代码 $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页面的元素代码如下:  代码如

div实现自适应高度的textarea,实现angular双向绑定

相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的