textarea多行文本框自适应高度
<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
<script>
$(function(){
function autoHeight(ele){
var $this = $(ele);
$this.css({'height':'20px','overflow-y':'hidden'}).height(ele.scrollHeight);
if(parseInt($this.height())>60){
$this.height(60);
}
}
$('.text').on('input propertychange',function(){
autoHeight(this);
})
$('.text').trigger("input");
$('.text').trigger("propertychange");
})
}) </script>
<textarea name="message" class="text"></textarea>
textarea多行文本框自适应高度的更多相关文章
- textarea框自适应高度
export function autoTextarea(elem, extra, maxHeight){ /**textarea文本域随内容的多少而调整高度 */ extra = extra || ...
- 如何在textarea多行文本框中设置滚动条样式
其中设置滚动条的组成都有以下部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决 ...
- Textarea随着文本的字数自适应高度,后来发现用 contenteditable 代替textarea 效果更佳
做移动端项目遇到很多问题,最近比如textarea 随着文本的字数自动撑开高度, 网上也查阅了一些资料发现比较有用的方法 就是获取 textarea的行数和换行符来动态改变textarea的高度 就 ...
- CSS——textarea多行文本框禁止拖动问题解决
文本框这样配置就好 textarea{ resize:none; }
- angular指令系列---多行文本框自动高度
angular.module('MyApp') .directive('autoTextare', ['$timeout', function ($timeout) { return { restri ...
- html5 textarea 文本框根据输入内容自适应高度
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
- 将textarea实现自适应高度及IE下滚动条不出现的bug
1.<el-table-column label="备注" width="180"> <template scope="scope& ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
随机推荐
- ckeditor添加自定义按钮整合swfupload实现批量上传图片
ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinde ...
- python(九):迭代器与生成器
一.Python的迭代协议 迭代器是访问集合内元素的一种方式.它只能依次访问集合内元素.其特点是惰性执行. collection.abc的迭代协议提供了两个概念:可迭代对象和迭代器.可迭代对象:必须具 ...
- Map 模板
#include<stdio.h> #include<iostream> #include<map> using namespace std; typedef pa ...
- 第一个Windows窗口应用程序
学习目的 熟悉开发工具Visual C++ 6.0和MSDN 2001的使用. 应用Windows API函数, 手工编写具有最基本构成的Windows窗口应用程序(包含WinMain入口函数, 消息 ...
- eml文件解析实例,简历信息抓取工具
先上工具效果图,如下图所示: 背景 某公司使用58同城进行人员招聘,当有应聘人员通过58同城给该公司投简历后,58同城会发送一份邮件到该公司的注册邮箱,邮件内容如上图右侧显示,主题为“应聘贵公司XXX ...
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】
1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...
- H5禁止手机自带键盘弹出
一个功能中用到这个, 调用软键盘, 不想弹出手机默认的输入法 网上找了个 http://blog.csdn.net/qq_24147051/article/details/52958610 处理方式 ...
- JavaScript Standard Style
这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. https://github.com/standard/standard/blob/ ...
- 搭建hustoj
环境:centos6.5 + LAMP环境 LAMP环境的搭建可以参考下面这篇文章 http://www.cnblogs.com/yoke/p/7257184.html 搭建完LAMP环境之后可以按照 ...
- android热加载随记
在我们日常的开发过程中,程序难免会出现BUG,一般有集中处理方式,发布新版本APP让用户来升级,或者打补丁来修复bug 前者本文在这里不错讨论,打补丁升级又分为两种一种是需要重启应用,一种是不需要.不 ...