<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. 纯代码Autolayout的三种方法

    Autolayout讲解较多的就是xib和storyboard用法,本文主要记录纯代码的Autolayout使用方法: 方法1.苹果原生的方法,这种方法虽然简单但是太过繁杂,可用性很差 //宽度=su ...

  2. C#学习笔记(基础知识回顾)之值类型和引用类型

    一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...

  3. safari

    http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/ http://rawgit.com/zha ...

  4. BZOJ1492 [NOI2007]货币兑换

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...

  5. Hibernate详讲

    一 概述 1.JPA Java Persistence API,是Java EE为ORM框架定义的规范,任何使用java语言的ORM框架都必须实现该规范.Hibernate/Mybatis都是是JPA ...

  6. is_array判断是否为数组

    if(is_array($arr)){ echo "是数组"; }else{ echo "不是数组"; }

  7. 搭建VueMint-ui框架

    搭建VueMint-ui框架 2018年01月07日 22:29:58 阅读数:2660 vueweb vue project 检查项目环境 一.检查是否安装node.js # 检查node版本 $ ...

  8. LeetCode 533----Lonely Pixel II

    问题描述 Given a picture consisting of black and white pixels, and a positive integer N, find the number ...

  9. 关于modelmap.addAttribute("",)转到jsp页面获取不到值的问题

    问题一,可能是你设置的web.xml的头有问题 掉坑里好一会,发现我默认生成的web.xml中头部的配置是 <!DOCTYPE web-app PUBLIC "-//Sun Micro ...

  10. Apache 2 解析html中的php

    Ubuntu下安装Apache 2无法解析html中的php Ubuntu下安装了Apache 2却无法解析html中的php ,好多说是在httpd.conf文件中修改代码,但是ubuntu中没有这 ...