<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多行文本框自适应高度的更多相关文章

  1. textarea框自适应高度

    export function autoTextarea(elem, extra, maxHeight){ /**textarea文本域随内容的多少而调整高度 */ extra = extra || ...

  2. 如何在textarea多行文本框中设置滚动条样式

    其中设置滚动条的组成都有以下部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决 ...

  3. Textarea随着文本的字数自适应高度,后来发现用 contenteditable 代替textarea 效果更佳

    做移动端项目遇到很多问题,最近比如textarea 随着文本的字数自动撑开高度, 网上也查阅了一些资料发现比较有用的方法 就是获取 textarea的行数和换行符来动态改变textarea的高度  就 ...

  4. CSS——textarea多行文本框禁止拖动问题解决

    文本框这样配置就好 textarea{ resize:none; }

  5. angular指令系列---多行文本框自动高度

    angular.module('MyApp') .directive('autoTextare', ['$timeout', function ($timeout) { return { restri ...

  6. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  8. 将textarea实现自适应高度及IE下滚动条不出现的bug

    1.<el-table-column label="备注" width="180"> <template scope="scope& ...

  9. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

随机推荐

  1. Maven环境的搭建

    1.本地仓库和apache-mavenbin.zip的下载与解压 <1.apache-mavenbin.zip下载网址 http://maven.apache.org/download.cgi ...

  2. GString惰性求值

    当对一个GString实例求值时,如果其中包含一个变量,该变量的值会被简单地打印到一个Writer,通常是一个StringWriter.然而,如果GString中包含的是一个闭包,而非变量,该闭包就会 ...

  3. python用random产生验证码,以及random的一些其他用法

    产生随机验证码函数 import random def get_code(): code = '' for i in range(5): num = str(random.randrange(10)) ...

  4. git杂记-查看历史提交

    普通查看:git log.输入q退出比较. $ git log commit ca82a6dff817ec66f44342007202690a93763949 Author: Scott Chacon ...

  5. 如何实现监听 console.log

    var lastLog; console.oldLog = console.log; console.log = function(str) { console.oldLog(str); lastLo ...

  6. css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

    linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)).(匀速) ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0. ...

  7. 用一个div模拟textarea并实现高度自适应

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  8. Java设计模式—命令模式

    命令模式是一个高内聚的模式. 定义如下:将一个请求封装成一个对象,从而让你使用不同的请求把客户端参数化,对请求排队或者记录请求日志,可以提供命令的撤销和恢复功能. 通用类图如下: 角色说明: ● Re ...

  9. 一步一步pwn路由器之栈溢出实战

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 本文以 DVRF 中的第一个漏洞程序 stack_bof_01 为 ...

  10. Hadoop完全分布分布式配置

    1.准备三台虚拟机.安装Ubuntu操作系统,具体过程省略 2.三台虚拟机上分别安装Java环境,具体过程省略(保证三者的Java路径一致) 3.三台机器分别配置ssh本机免密码登录 (1)安装ssh ...