`

textarea文本域自适应高度[自动增加高度]

阅读更多

textarea文本域自适应高度[自动增加高度]

在作为留言或者其他的网站备注的地方都是用的textarea,但是当文字多过其高度的时候,前面的文字就被顶到上面去了,要看内容还要翻上去。

当有了这个就不需要了,因为他会自动增加高度,适应当前的文字高度。

方法其实很简单,建议以后模板的作者可以加上。

1.引入Jquery.

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
2.引入初始css.
body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}
3.加入自适应的JS
$.fn.autoHeight = function(){
	
	function autoHeight(elem){
		elem.style.height = 'auto';
		elem.scrollTop = 0; //防抖动
		elem.style.height = elem.scrollHeight + 'px';
	}
	
	this.each(function(){
		autoHeight(this);
		$(this).on('keyup', function(){
			autoHeight(this);
		});
	});

}
	
	
$('textarea[autoHeight]').autoHeight();
4.加入textarea
<div><textarea autoHeight="true">textarea</textarea></div>
分享到:
评论

相关推荐

    固定textarea文本域尺寸

    textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候,我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动textarea的大小

    微信小程序 内容自适应textarea表单组件(autoheight_textarea)

    textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: &lt;autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"&gt;&lt;/autoheight_textarea&gt;

    div模拟textarea文本域实现高度自适应效果代码

    一、关于textarea文本域以及高度自适应 textarea标签为表单元素,一般用在多行文字的输入。在web应用上常见的是评论输入框,微博信息输入框等。例如企鹅微博的输入框: 作为多行文本域功能来讲,textarea满足了我们...

    textarea文本域宽度和高度width及height自动适应实现代码

    本文为大家介绍下textarea文本域宽度和高度(width、height)如何自动适应变化处理,下面有个不错的示例,感兴趣的朋友可以参考下

    textarea自适应高度标签,去除难看的滚动条

    这是一个令textarea高度自适应的插件,使用jquery 去掉令人非常讨厌的滚动条;

    css textarea 高度自适应,无滚动条

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y:visible } &lt;textarea class=”t_area”&gt; 随便在这里输入内容,textarea的高度...

    解决Layui 表格自适应高度的问题

    今天小编就为大家分享一篇解决Lyaui 表格自适应高度的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    文本框属性

    HTML中的标签textarea的属性及用法

    BootStrap表单控件之文本域textarea

    主要介绍了BootStrap表单控件之文本域textarea,需要的朋友可以参考下

    react-autosize

    react-textarea-autosize React 组件自动调整 textarea 高度以适应文本。安装npm install react-textarea-autosize --save 例子 var React = require ( 'react' ) ; var Textarea = require ( 'react-textarea-...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.4 Ext.form.field.Text文本域 4.1.5 Ext.form.field.TextArea文本区 4.1.6 Ext.form.field.Number数字输入框 4.1.7 Ext.form.field.Checkbox复选框和Ext.form.field.Radio单选框 4.1.8 Ext.form.Checkbox...

Global site tag (gtag.js) - Google Analytics