`

【jQuery插件】autoTextarea-文本框根据输入内容自适应高度【蕃薯耀分享】

阅读更多

 

【jQuery插件】autoTextarea-文本框根据输入内容自适应高度

 

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

 

转自:http://www.css88.com/archives/3948

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2013年1月26日 10:27:18 星期六

 

 

分享到:
评论

相关推荐

    jQuery.autoTextarea文本框自适应输入高度代码.rar

    《jQuery.autoTextarea文本框自适应输入高度代码详解》 在网页设计中,用户交互体验是至关重要的一个环节,其中文本输入框的优化是提升用户体验的关键因素之一。`jQuery.autoTextarea`是一个优秀的JavaScript插件,...

    jquery----TextArea高度自适应

    在探讨“jQuery——TextArea高度自适应”的主题时,我们深入解析了如何利用jQuery库实现文本区域(TextArea)的高度自动调整,以确保其高度能够根据输入的文本量动态变化,从而提供更好的用户体验。以下是对该主题的...

    jquery插件ez-bg-resize背景自适应浏览器的大小.zip

    《jQuery插件ez-bg-resize:实现背景自适应浏览器大小》 在网页设计中,背景图像的自适应性是提升用户体验的重要因素之一。一个优秀的网页应该能够根据浏览器窗口的大小变化,动态调整背景图像的显示,以保持视觉的...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jquery插件,是文本框只能输入数字

    这个插件的标题"jquery插件,是文本框只能输入数字"表明我们正在讨论一个特定的jQuery扩展,它的功能是限制用户在文本框中只能输入数字。这种功能在各种场景下都很实用,例如在线表单、财务输入或任何需要精确数字...

    jquery插件库-jquery按钮控制text文本框商品数量增加或减少.zip

    这个“jquery插件库-jquery按钮控制text文本框商品数量增加或减少.zip”压缩包文件包含了用于电商网站或其他需要显示商品数量的应用场景的jQuery插件。这个插件主要用于控制文本框中的商品数量,用户可以通过点击加...

    jquery-文本框输入即时显示可输入剩余字符数

    "jquery-文本框输入即时显示可输入剩余字符数"这个功能是提升用户体验的一种常见方式,它允许用户实时看到他们在一个文本框中还能输入多少字符,避免超过限制。这种功能广泛应用于评论、留言、表单填写等场景,有助...

    jQuery摄像头插件jquery-webcam-plugin

    **jQuery摄像头插件jquery-webcam-plugin** 在网页开发中,集成摄像头功能可以帮助用户实时捕捉图像,广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库,它...

    JQuery 插件之多行文本框自动大小

    可以轻松实现多行文本框根据输入内容多少,自动变化!

    jQuery.jquery-finger—左右自适应全屏幻灯片切换

    `jQuery.jQuery-finger` 是一个基于 jQuery 的插件,它允许开发者创建左右自适应的全屏幻灯片切换效果,为用户提供流畅、直观的交互体验。这个插件特别适合用于产品展示、图片画廊或者网站首页,可以提高网站的视觉...

    tab选项卡切换效果,tab选项卡内容宽度自适应

    在这个项目中,"tab选项卡内容宽度自适应"意味着设计者关注于使内容区域的宽度能够根据浏览器窗口大小或设备屏幕尺寸自动调整,以提供更好的用户体验。 实现这样的效果,主要涉及以下几个关键知识点: 1. HTML ...

    jquery对iframe自适应高度插件

    这个插件是专门为了解决`iframe`高度自适应的问题而设计的,它允许`iframe`根据其内部内容自动调整高度,确保用户无需滚动就能查看完整内容。该插件在国外被广泛下载和使用,表明了它在实际应用中的高效性和实用性。...

    iframe根据页面内容自适应高度和宽度

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html <iframe src="http://example.com" width="500" height="300">...

    插件jquery-ui-timepicker-addon.js

    jquery插件jquery-ui-timepicker-addon.j

    jquery.editable-select

    `editable` 标签表明这个插件的核心特性是可以被编辑的,意味着用户不仅可以浏览预设的选项,还可以自定义输入内容,从而提高了用户在交互过程中的灵活性和效率。 下面我们将详细探讨 `jquery.editable-select` ...

    jquery.ajax-combobox, jQuery插件,创建一个文本框,可以以自动完成并下拉选择.zip

    jquery.ajax-combobox, jQuery插件,创建一个文本框,可以以自动完成并下拉选择 jquery.ajax-combobox 可以自动完成和pull-down-select的文本框的jQuery插件。 演示http://www.usamimi.info/~sutara/ajax-combobox

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jquery.datepicker-zh-CN.js

    <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...

Global site tag (gtag.js) - Google Analytics