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的高度不会随着 ...
随机推荐
- Java中多个集合的交集,并集和差集
一.交集 java中交集使用 A.retainAll(B) ,交集的结果在集合A中. import org.junit.Test; import java.util.HashSet; import j ...
- 常见IT英语短语一
SSO (Single sign-on)单点登陆. aspect-oriented programming,AOP面向切面. CORS:Cross-origin resource sharing跨域资 ...
- java设计模式-----9、观察者模式
Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对 ...
- 理解webpack4.splitChunks之其余要点
splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.ca ...
- Maven 安装 eclispe
-Dmaven.multiModuleProjectDirectory=$M2_HOME
- CPU纯软件全虚拟化技术
我们在前面的文章中提到了虚拟化技术的大致分类情况,即分为全虚拟化.半虚拟化和硬件辅助虚拟化3大类.而我们虚拟化技术最主要的虚拟主体就是我们的硬件CPU.内存和IO,那么我们的CPU在全虚拟化模式下如何 ...
- 1.bootstrap基础简介
一·基础简介 1.Bootstrap,来自 Twitter,是一个用于快速开发 Web 应用程序和网站的前端框架,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JavaSc ...
- centos 7.2 Apache+mysql+php step by step备忘
1. 如何允许laravel程序执行sudo shell脚本? chmod u+w /etc/sudoers ; echo "apache ALL=(ALL) NOPASSWD:ALL&qu ...
- Google Developers 中国网站正式发布
Google Developers 中国网站 (developers.google.cn) 正式发布!Google Developers 中国网站是特别为中国开发者而建立的,它汇集了 Google 为 ...
- configparser logging collections 模块
configparser 模块: 这是一个写入的模块就是把你的信息给写入的模块 #这是一个把信息写入example文件内import configparserconfig = configparser ...