文本框根据输入内容自适应高度
2019独角兽企业重金招聘Python工程师标准>>>
jQuery实现
(function($){$.fn.autoTextarea = function(options) {var defaults={maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度minHeight:$(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示};var opts = $.extend({},defaults,options);return $(this).each(function() {$(this).bind("paste cut keydown keyup focus blur",function(){var height,style=this.style;this.style.height = opts.minHeight + 'px';if (this.scrollHeight > opts.minHeight) {if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {height = opts.maxHeight;style.overflowY = 'scroll';} else {height = this.scrollHeight;style.overflowY = 'hidden';}style.height = height + 'px';}});});};})(jQuery);
调用方式
$("#textarea_id").autoTextarea({maxHeight:220});
js实现方式
/*** 文本框根据输入内容自适应高度**/var autoTextarea = function (elem, extra, maxHeight) {extra = extra || 20;var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),addEvent = function (type, callback) {elem.addEventListener ?elem.addEventListener(type, callback, false) :elem.attachEvent('on' + type, callback);},getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name];if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();return rect.bottom - rect.top -parseFloat(getStyle('paddingTop')) -parseFloat(getStyle('paddingBottom')) + 'px';};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFloat(getStyle('height'));elem.style.maxHeight = elem.style.resize = 'none';var change = function () {var scrollTop, height,padding = 0,style = elem.style;if (elem._length === elem.value.length) return;elem._length = elem.value.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.style.height = minHeight + 'px';if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight - padding;style.overflowY = 'auto';} else {height = elem.scrollHeight - padding;style.overflowY = 'hidden';};style.height = height + extra + 'px';scrollTop += parseInt(style.height) - elem.currHeight;document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;elem.currHeight = parseInt(style.height);};};addEvent('propertychange', change);addEvent('input', change);addEvent('focus', change);change();};
调用方式
autoTextarea(document.getElementById('textarea_id'));
转载于:https://my.oschina.net/lilugirl2005/blog/740986
文本框根据输入内容自适应高度相关推荐
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- h5如何实现textarea根据输入内容自适应高度
h5如何实现textarea根据输入内容自适应高度 webApp的开发经常会在有评论的功能,textarea会随内容的增加自动增加元素的高度. 实现效果如图: : 1.在底部设置fix的附件元素div ...
- JS 文本框内输入内容添加在页面与删除
文本框内输入文字,点击添加按钮·就可添加至页面内,点击删除即可依次删除 <!DOCTYPE html> <html><head><meta charset=& ...
- selenium python 文本框输入信息_selenium python向富文本框中输入内容
基于本人不会JavaScript,不能像大神一样写出很牛X的方法,只能使用者屌丝方法了,不过很容易理解. 我使用的是ueditor富文本框 1.我的富文本框是在一个iframe中,进入iframe的方 ...
- Qt工作笔记-QLineEdit用正则限制文本框的输入内容+正则表达式语法
原文地址: https://blog.csdn.net/graceland525/article/details/48676071//使用正则表达式限制只能输入数字 QRegExp rx(" ...
- QLineEdit用正则限制文本框的输入内容+正则表达式语法
参考文章 QLineEdit输入限制 //使用正则表达式限制只能输入数字 QRegExp rx("[0-9\.]+$"); QRegExpValidator *validator ...
- JS控制 textarea多行文本框HTML标签根据内容自适应高度
<script> // 页面加载调用ableMutibleTextArea();function ableMutibleTextArea(){$('textarea').each(func ...
- excel 查找图相框或文本框中的内容
在excel中经常遇到有用户使用图相框或者文本框来输入内容,使excel看上去更加美观,但是如果我们想查找的文字内容在文本框或者图相框中,那么正常的ctrl+F的查找功能就不能正常索搜到这些文字. 需 ...
- Textbox控件禁止用户向文本框中输入文字
在Winform程序中,Textbox控件,如何禁止用户向文本框中输入文字,而只是可以通过程序来写入内容 选择这个控件的属性,在事件列中找到KeyPress,双击,生成相应的事件监听方法,加入代码e. ...
最新文章
- CDN的原理及对SEO的影响
- 人人都写过的5个Bug!
- 由IP和掩码计算广播地址
- 阿里巴巴400集python教程_阿里巴巴推荐的400集Python视频合集免费学起来,学完万物皆可爬...
- HDU 1815, POJ 2749 Building roads(2-sat)
- 内卷太厉害怎么办?多读好书破万“卷”
- ubuntu常见问题有效解决办法
- 在macOS Big Sur上如何重置蓝牙?
- 洛谷P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver
- LINUX安装依赖库的解决办法
- PHPCMS2008 二次开发摘要
- 面试题-C++软件/客户端开发
- PHP爬虫框架phpspider(二) - 分页爬取写入数据库
- linux 主机支持远程唤醒_在Linux下用Wake On LAN实现远程开机
- u盘插上电脑后计算机没没磁盘,U盘插上电脑没有显示“可移动磁盘”的解决
- 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
- Acme CAD Converter 的线宽要怎么设置啊
- php属于哪种语言,php是哪种类型的语言
- 杨世忠:“周转”知识终圆航天梦
- 加权平均值与平均值_如何在Excel中计算加权平均值