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

文本框根据输入内容自适应高度相关推荐

  1. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  2. h5如何实现textarea根据输入内容自适应高度

    h5如何实现textarea根据输入内容自适应高度 webApp的开发经常会在有评论的功能,textarea会随内容的增加自动增加元素的高度. 实现效果如图: : 1.在底部设置fix的附件元素div ...

  3. JS 文本框内输入内容添加在页面与删除

    文本框内输入文字,点击添加按钮·就可添加至页面内,点击删除即可依次删除 <!DOCTYPE html> <html><head><meta charset=& ...

  4. selenium python 文本框输入信息_selenium python向富文本框中输入内容

    基于本人不会JavaScript,不能像大神一样写出很牛X的方法,只能使用者屌丝方法了,不过很容易理解. 我使用的是ueditor富文本框 1.我的富文本框是在一个iframe中,进入iframe的方 ...

  5. Qt工作笔记-QLineEdit用正则限制文本框的输入内容+正则表达式语法

    原文地址: https://blog.csdn.net/graceland525/article/details/48676071//使用正则表达式限制只能输入数字 QRegExp rx(" ...

  6. QLineEdit用正则限制文本框的输入内容+正则表达式语法

    参考文章 QLineEdit输入限制 //使用正则表达式限制只能输入数字 QRegExp rx("[0-9\.]+$"); QRegExpValidator *validator ...

  7. JS控制 textarea多行文本框HTML标签根据内容自适应高度

    <script> // 页面加载调用ableMutibleTextArea();function ableMutibleTextArea(){$('textarea').each(func ...

  8. excel 查找图相框或文本框中的内容

    在excel中经常遇到有用户使用图相框或者文本框来输入内容,使excel看上去更加美观,但是如果我们想查找的文字内容在文本框或者图相框中,那么正常的ctrl+F的查找功能就不能正常索搜到这些文字. 需 ...

  9. Textbox控件禁止用户向文本框中输入文字

    在Winform程序中,Textbox控件,如何禁止用户向文本框中输入文字,而只是可以通过程序来写入内容 选择这个控件的属性,在事件列中找到KeyPress,双击,生成相应的事件监听方法,加入代码e. ...

最新文章

  1. CDN的原理及对SEO的影响
  2. 人人都写过的5个Bug!
  3. 由IP和掩码计算广播地址
  4. 阿里巴巴400集python教程_阿里巴巴推荐的400集Python视频合集免费学起来,学完万物皆可爬...
  5. HDU 1815, POJ 2749 Building roads(2-sat)
  6. 内卷太厉害怎么办?多读好书破万“卷”
  7. ubuntu常见问题有效解决办法
  8. 在macOS Big Sur上如何重置蓝牙?
  9. 洛谷P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver
  10. LINUX安装依赖库的解决办法
  11. PHPCMS2008 二次开发摘要
  12. 面试题-C++软件/客户端开发
  13. PHP爬虫框架phpspider(二) - 分页爬取写入数据库
  14. linux 主机支持远程唤醒_在Linux下用Wake On LAN实现远程开机
  15. u盘插上电脑后计算机没没磁盘,U盘插上电脑没有显示“可移动磁盘”的解决
  16. 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
  17. Acme CAD Converter 的线宽要怎么设置啊
  18. php属于哪种语言,php是哪种类型的语言
  19. 杨世忠:“周转”知识终圆航天梦
  20. 加权平均值与平均值_如何在Excel中计算加权平均值

热门文章

  1. encodeURIcomponent编码和ASP.NET之间编码转换
  2. js+JQuery实现返回顶部功能
  3. 一些看起来有用但没用过的函数
  4. 谷歌宣布 Linux Kernel、Kubernetes 0day 漏洞奖励加倍
  5. 谷歌推出关于滥用研究资助的新型试验计划
  6. FinSpy 发布 Mac 和 Linux OS 版本攻击埃及组织机构
  7. 火眼报告称2019年新出现500个新型恶意软件
  8. 机器学习利器——决策树和随机森林
  9. 使用RTL-SDR打开车门
  10. 物联网给快递业带来新变革