textarea高度跟随文字高度而变化
html部分:
<textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea>
js部分:
<!--textarea高度跟随文字高度而变化-->
<script>
function makeExpandingArea(el) {
var setStyle = function(el) {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
// console.log(el.scrollHeight);
}
var delayedResize = function(el) {
window.setTimeout(function() {
setStyle(el)
},
0);
}
if (el.addEventListener) {
el.addEventListener('input',function() {
setStyle(el)
},false);
setStyle(el)
} else if (el.attachEvent) {
el.attachEvent('onpropertychange',function() {
setStyle(el)
});
setStyle(el)
}
if (window.VBArray && window.addEventListener) { //IE9
el.attachEvent("onkeydown",function() {
var key = window.event.keyCode;
if (key == 8 || key == 46) delayedResize(el);
});
el.attachEvent("oncut",function() {
delayedResize(el);
}); //处理粘贴
}
}
makeExpandingArea(textarea);
</script>
textarea高度跟随文字高度而变化的更多相关文章
- 小程序实现textarea随输入的文字行数变化高度自动增加
参考链接:https://blog.csdn.net/liuwengai/article/details/78987957 该实现方法是根据上面的链接改编为小程序的实现,代码如下: wxml: < ...
- textarea文本域的高度随内容的变化而变化
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...
- iOS UITextView 高度随文字自己主动添加,并尾随键盘移动(二)
上节地址:http://blog.csdn.net/lwjok2007/article/details/47401293 接着上节我们来实现 输入框自己主动调节高度 首先,我们得知道,要推断是否该换行 ...
- iOS中动态计算不同颜色、字体的文字高度
在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...
- javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示
function fontAutoMoreLine() { let textBox = document.getElementById("iconTxt"); let maxHei ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- textarea 的最大高度以及最小高度
<script type="text/javascript"> $(function(){ $("#textarea3").textareaAuto ...
- iOS 【终极方案】精准获取webView内容高度,自适应高度
前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...
- fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题
最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...
随机推荐
- CentOS 安装Scrapy
本文python版本是python3.5.3,关于升级python和安装pip请到:http://www.cnblogs.com/technologylife/p/6242115.html 安装相关包 ...
- puppet的使用:puppet配置文件介绍
配置文件的产生 Puppet安装完后,配置文件就产生了,名称为puppet.conf,一般在/etc/puppet路径下. master也可以通过命令: puppet master --genconf ...
- [webpack]path、publicPath、--content-base 理解
附源码:http://files.cnblogs.com/files/chenshao/startPublic.rar 'use strict'; var webpack = require('web ...
- Linux 系统计算文件夹下文件数量数目
查看某目录下文件的个数(未包括子目录) ls -l |grep "^-"|wc -l 或 find ./company -type f | wc -l 查看某目录下文件的个数,包括 ...
- 详解C#委托和事件(一)
委托(Delegate)是安全封装方法的类型,类似于C和C++中的函数指针,与函数指针不同的是,委托是面向对象的.类型安全的和可靠的: 一.委托类型是CTS中五种基础类型之一,是一种引用类型,表示对具 ...
- JAVA 之 多态 抽象 接口
一:多态 1:多态 一个对象有多种形式的能力 2:步骤 1编写父类派生子类 2子类重写父类方法 3用父类的数据类型引用子类对象 3:静态多态的实现方式就是方法重载 4:动态多态的实现方式就是重写 ...
- oracle存储过程删除树状结构的表数据
今天在删除一个车辆品牌表的时候,遇到了一个问题,是在java的代码中做逻辑删除还是直接在Oracle中一次删除完成呢 思来想去觉得还是在sql里直接删除比较合适, 为什么呢? 第一,涉及数据库的读写操 ...
- 哪个先执行:@PostConstruct和@Bean的initMethod?
结论: /** * step1:执行构造函数 * step2:执行使用@PostConstruct注解修饰的方法[如果有多个,则执行顺序不确定] * step3:执行@Bean注解中initMetho ...
- 通向全栈之路——(5)git通三端
一.在私有git服务中新建一个项目(码云):将电脑上id_rsa.pub(git公钥)拷贝至ssh下面中保存二.本地代码关联git:1.git全局设置:git config --global user ...
- 微信小程序: 编译.wxss文件错误解决
博主最近又重新开始捡起微信小程序,想做点自己的东西.了解到最近小程序工具有做更新,就顺手更新了最新的版本,功能比之前强大了不少! 更新归更新,更新后控制台就一直报下面这个错误: 解决办法 有问题总 ...