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的高度不会随着 ...
随机推荐
- golang rpc 简单范例
RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. 它的工作流程如下图: go ...
- C#学习笔记-中英文切换(XML)
这几天因为软件需要加英文版本,所以查了好久的资料找到了相关的信息,原资料参考:http://blog.csdn.net/softimite_zifeng 上网查的中英文切换大约有两种方式:1.动态加载 ...
- BZOJ1996 [Hnoi2010] 合唱队
Description Input Output Sample Input 4 1701 1702 1703 1704 Sample Output 8 HINT Solution 令$f_{i,j}$ ...
- 服务器学习笔记之servlet
初衷 想学习下服务器这边的知识,制定了一条学习路线:java8--->servlet--->springMvc--->springBoot--->springCloud.在此当 ...
- 01.JavaScript-->js组成
- Java设计模式—组合模式
组合模式是一种常见的设计模式(但我感觉有点复杂)也叫合成模式,有时又叫做部分-整体模式,主要是用来描述部分与整体的关系. 个人理解:组合模式就是将部分组装成整体. 定义如下: 将对象组合成树形结构以表 ...
- shrio的知识储备
博客讲解; shrio的知识储备 shrio的简单认识 笔记整理地址: Shrio.pdf 下载 Shrio理论.doc 下载 Shrio知识储备.doc 下载 Shrio的知识储备 (一) S ...
- mvn install 时候报GBK编码错误解决办法
在pom.xml里面 <properties> <!-- 文件拷贝时的编码 --> <project.build.sourceEncoding>UTF-</p ...
- RAP, 高效前后端联调框架,接口文档管理工具
RAP通过GUI工具帮助WEB工程师更高效的管理接口文档,同时通过分析接口结构自动生成Mock数据.校验真实接口的正确性,使接口文档成为开发流程中的强依赖.有了结构化的API数据,RAP可以做的更多, ...
- WebAPI应用问题整理
这两天在实现一个WebAPI的服务过程中遇到了下面的一些问题 1, 一个Controller中添加多个Action 基于模板创建WebAPI项目后,项目中会自动生成一个ValueController的 ...