html textarea 缩放,textarea自动撑开缩放
思路一
使用一个pre元素,将textarea的内容复制到pre的子元素span中,利用元素换行自动撑开包裹元素.wrap的高度。
监听事件
Firefox、Chrome、IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件。
1.oninput
oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)。
2.onpropertychange
onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、鼠标粘贴时触发)(仅 IE 支持)
实现
div, pre, span, textarea {
padding: 0;
margin: 0;
}
.wrap{
position: relative;
border: 1px solid black;
overflow: hidden;
}
.wrap > pre{
padding: 8px 12px;
}
#expand-area{
white-space: pre-wrap; /* 段落中的文本换行 */
word-wrap: break-word; /* 长单词换行 */
}
.wrap textarea{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; /* textarea 热区充满整个区域*/
padding: 8px 12px;
outline: 0;
resize: none;
border: none;
overflow: hidden;
box-sizing: border-box;
}
function autoExpand (wrap) {
let expandDom = wrap.querySelector('#expand-area')
let textarea = wrap.querySelector('#txt')
// Firefox、Chrome、IE9,IE10支持oninput,所有版本的 IE 支持onpropertychange
if (textarea.addEventListener) {
textarea.addEventListener('input', function() {
expandDom.textContent = textarea.value;
}, false);
expandDom.textContent = textarea.value;
} else if (textarea.attachEvent) {
textarea.attachEvent('onpropertychange', function() {
var html = textarea.value.replace(/\n/g,'
');
expandDom.innerText = html;
});
var html = textarea.value.replace(/\n/g,'
');
expandDom.innerText = html;
}
if(window.VBArray && window.addEventListener) { //IE9
textarea.attachEvent("onkeydown", function() {
var key = window.event.keyCode;
if(key == 8 || key == 46) expandDom.textContent = textarea.value; // backspace、delete 两个按键的 keyCode 分别为 8、46
});
textarea.attachEvent("oncut", function(){
expandDom.textContent = textarea.value;
});//处理粘贴
}
}
autoExpand(document.querySelector('.wrap'))
思路二
只使用textarea并赋予textarea的高度为它的scrollHeight,但是交互不友好,有明显的的抖动。
function makeExpandingArea(el) {
var timer = null;
//解决ie8有溢出堆栈问题
var setStyle = function(el, auto) {
if (auto) el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
}
var delayedResize = function(el) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
setStyle(el)
}, 200);
}
if (el.addEventListener) {
el.addEventListener('input', function() {
setStyle(el, 1);
}, 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);
}); //处理粘贴
}
}
var textarea = document.getElementById('textarea');
makeExpandingArea(textarea);
html textarea 缩放,textarea自动撑开缩放相关推荐
- textarea高度自适应自动增高撑开
方法一:div模拟textarea文本域轻松实现高度自适应 demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html 因为t ...
- Unity摄像机控制插件移动旋转缩放聚焦自动居中
目录 前言 一.主要特点 二.使用步骤 1.导入插件 2.拖入SR_Camera Prefab到Hierarchy场景中 3.设置场景中需要交互的物体和默认射线检测的地面层 4.限制摄像机的可移动范围 ...
- textarea 换行 (自动伸缩)|兼容ie6以上
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
- 用div模拟文本域实现高度自动撑开以及相关问题的解决方法
前段时间项目里面用到了一个高度随着内容自动撑开的文本域效果,这一点传统的textarea标签是满足不了的,而我们要做的只是在div中加一个contenteditable="true" ...
- php textarea 属性,textarea属性设置详解
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible( ...
- 网页缩放与窗口缩放_功能缩放—不同的Scikit-Learn缩放器的效果:深入研究
网页缩放与窗口缩放 内部AI (Inside AI) In supervised machine learning, we calculate the value of the output vari ...
- html 图片自由缩放_PS中的“缩放”
大家好!今天我们来总结一下Photoshop中的缩放,主要有图像(图片)的缩放.选区缩放.图层样式缩放. 1.图像的缩放 选中图像-快捷键 Ctrl+T-选择变换点.单击鼠标拖动进行变换. 2.选区缩 ...
- css3缩放 transform: scale() 使用缩放之后顶点对齐问题
css3缩放 transform: scale() 使用缩放之后顶点对齐问题 注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 <d ...
- java textarea append_JavaFX TextArea.append()导致java.lang.NullPointerException
我正在读取一个串口并将其写入文本区域作为滚动值.我创建了SerialPortReader类,它运行良好.我的主代码只是调用"updateTextArea()"来告诉类textare ...
最新文章
- 深度强化学习入门到精通--资料综述
- Postgresql在Windows下的解压安装
- 空扫描Idle Scanning
- rabbitmq 查询版本_Hyperf 发布 v2.0.14 版本 | 企业级的 PHP 微服务云原生协程框架
- 撤销 git commit
- 基于DirectX的游戏引擎-Xworld
- codevs1316 文化之旅
- [SHOI2017]组合数问题
- Maven(5)--常用插件
- 整合百度UEditor上传图片到阿里云OSS
- python中的所有功能_python – 是否可以列出模块中的所有功能?
- Connection to @localhost failed. [08001] Could not create connection to database server. Attempt
- mysql 数据舍取_mysql取舍索引
- Tensor flow 实战Google深度学习框架 笔记摘要Pthree(二)
- 【数学逻辑思维】A 好玩的数独游戏——001
- canvas 画图移动端出现锯齿毛边的解决方法
- 外贸公司怎么做开发信,什么企业邮箱更适合发开发信呢?
- 解决ftp 出现Passive mode refused的办法
- 基于C#winform的学生信息管理与成绩评价系统
- 「后以太坊1.0」众生相:DeFi拥堵,突围Layer2