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

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

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高，这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候，TextArea自动适应高度，大大改善了体验，这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。

如下图：

这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件 - TextArea。

我们来看看代码：

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);

调用代码：

$(".chackTextarea-area").autoTextarea({
maxHeight:220,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度
})

DEMO页面：http://www.yuzi.me/Demo/autoTextArea.html

Jquery实现 TextArea 文本框根据输入内容自动适应高度相关推荐

div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
java 限制文本框长度_[Java教程]如何限制textarea文本框的输入字数
[Java教程]如何限制textarea文本框的输入字数 0 2015-12-24 15:00:10 如何限制textarea文本框的输入字数: 在实际应用中,往往需要限制文本框的输入字数的长度,下面 ...
文本框根据输入内容自适应高度
2019独角兽企业重金招聘Python工程师标准>>> jQuery实现 (function($){$.fn.autoTextarea = function(options) {va ...
html中文本框的透明度,jQuery实现textarea文本框半透明文本提示效果
jquery实现textarea文本框带有半透明文本提示效果: textarea文本框一般用于编辑大段的文本,比如编辑器或者简单的留言回复之类的功能,有的在textarea文本框的有默认的提示语言. ...
如何设置textarea文本框中的内容为只读不可修改状态
设置<textarea>文本框中的内容为只读不可修改状态,只需要加入disabled或readonly即可 <textarea name="qualification&qu ...
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 ...

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

Jquery实现 TextArea 文本框根据输入内容自动适应高度相关推荐

最新文章

热门文章