<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. java 通用对象排序

    一个排序类,一个排序util? no.no.no…… 使用反射机制,写了一个通用的对象排序util,欢迎指正. 实体类: package entity; public class BaseTypeEn ...

  2. web杂记-禁止输入框自动填充文字

    1:背景 公司基于业务需求开发了一套纯JS的时间控件,本来用得好好得.后来发现在部分浏览器下使用该时间控件会出现输入框自动填充的部分与控件的展示产生了冲突: 如图: 2:问题分析 因为部分浏览太人性化 ...

  3. 鼠标事件-拖拽2(不能拖出指定对象的div)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. HTML contenteditable 属性

    contenteditable 属性是 HTML5 中的新属性,所有的主流浏览器都支持 contenteditable 属性. contenteditable 属性规定了元素内容是否可编辑. * 如果 ...

  5. EF Migrations

    Enable-Migrations -EnableAutomaticMigrations dbcontent Add-Migration XXXXX Update-Database -Verbose ...

  6. android 原生 MediaPlayer 和 MediaCodec 的区别和联系(三)

    目录:     (4)Android 官方网站 对 MediaCodec的介绍 注:编解码器特定数据(Code-specific Data,简写为csd) 部分结合网上资料加入了补充和个人理解.请悉知 ...

  7. bootstrap-table 分页增删改查之一(增加 删除)

    先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...

  8. Visual Studio 2017RC 版本相关资料

    Visual Studio 2017 RC版本说明 1.社区版 Visual Studio Community 2017 RC Visual Studio Community 2017 RC 是针对个 ...

  9. 让图片左右缓慢移动的MoveView

    让图片左右缓慢移动的MoveView 效果: 源码: MoveView.h 与 MoveView.m // // MoveView.h // AnimationView // // Created b ...

  10. VS2013 添加 ILDasm

    1.找到ILDasm.exe文件: 打开C:\Program Files\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5.1 Tools 2.vs外部工具添加 工 ...