基于jquery的文本域自适应功能

近日在写一个文本域自适应高度的功能,在网上发现一个效果比较好的方法。自己扩展了这个方法,现在分享给大家,有需要的朋友可以试一下,话不多说上代码。

 1 $.fn.autoHeight = function(val) {
 2
 3     function autoHeight(elem) {
 4         elem.style.height = ‘auto‘;
 5         elem.scrollTop = 0; //防抖动
 6         elem.style.height = elem.scrollHeight + ‘px‘;
 7     }
 8
 9     this.each(function() {
10
11     //支持按键弹起时文本域自适应高度
12         $(this).on(‘keyup‘, function() {
13             autoHeight(this);
14         });
15
16     //支持初始化文本域时自适应高度
17         $(this).text(val);
18         autoHeight(this);
19     });
20
21 }
22
23 $("textarea").autoHeight();
24
25 //var str = "空山新雨后,天气晚来秋。明月松间照,清泉石上流。竹喧归浣女,莲动下渔舟。随意春芳歇,王孙自可留。";
26
27 //$("textarea").autoHeight(str);//文本域有初始值的情况      

第一篇小随笔,如有问题,欢迎指正。

时间: 2024-10-11 01:31:40

基于jquery的文本域自适应功能的相关文章

文本域自适应(textarea)

文本域自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本域自适应高度(模拟有道词典..)</title> <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.min

textarea文本域的高度随内容的变化而变化

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class="t_area"> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先,原则上实现textarea自适应必须

8款基于Jquery的WEB前端动画特效

1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮时,按钮的背景就会播放不同的动画特效.这款jQuery按钮插件的使用方法也很简单,给按钮指定一个类,然后用一行JS代码初始化即可. 在线演示 源码下载 2.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画

基于jQuery UI的tabs选项卡美化

很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习来解决此问题,但对于后台程序员或者只是简单使用的人员来说,这个就会很影响开发效率了! 其实jQuery团队已经为大家解决了这个问题,只是很多同学没发布而已,jQuery团队基于jQuery打造了一套功能强大的UI框架--jQuery UI.经过长期的改进完善,jQuery UI已经拥有了很多常用和实

7款基于jquery的web前端的效果预览及源码下载

1.纯css3简单实用的checkbox复选框和radio单选框 简单实用的checkbox复选框和radio单选框.界面清淅.舒服. 在线演示 源码下载 2.jQuery实现重力弹动模拟效果特效 jQuery实现重力弹动模拟效果特效,鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落,并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错. 在线演示 源码下载 3.基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 基于jQuery打造的选项卡向上弹出jquery焦点

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

jquery 文本域光标操作(选、添、删、取)

一.JQuery扩展 ; (function ($) { /* * 文本域光标操作(选.添.删.取)的jQuery扩展 http://www.cnblogs.com/phpyangbo/p/5528648.html */ $.fn.extend({ /* * 获取光标所在位置 */ iGetFieldPos: function () { var field = this.get(0); if (document.selection) { //IE $(this).focus(); var sel

基于jQuery带备忘录功能的日期选择器

今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <header class="htmleaf-header">

基于jQuery自适应窗口大小导航菜单

基于jQuery自适应窗口大小导航菜单.这是一款响应式导航菜单特效,支持手机导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwM