html文本域textarea高度自增、自动换行
文本域自动换行、高度自增,采用以下方式:
html:
<textarea rows="1" class="answerTextArea" maxlength="60"></textarea>
css:
.answerTextArea{
width: 100%;
height: auto;
border:none;
outline: none;
font-size: 0.6rem;
color:#fff;
background: none;
box-sizing: border-box;
padding: 0.4rem 0;
border-bottom: 1px solid #fff;
}
js实现功能:
//监听文本域输入,高度自动变化
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);
}); //处理粘贴
}
} //监听文本换行
function exeTextLine(obj){
if(obj == ""){
var textareaList = document.getElementsByClassName('answerTextArea'); for(var i=0;i<textareaList.length;i++){
makeExpandingArea(textareaList[i]);
}
}else{
makeExpandingArea(obj);
} } exeTextLine("");
效果如下:


html文本域textarea高度自增、自动换行的更多相关文章
- textarea文本域的高度随内容的变化而变化
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- 文本域textarea
文本域 CreateTime--2017年5月23日15:12:08Author:Marydon 二.文本域 (一)语法 <textarea></textarea> (二) ...
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。
问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...
- palacehoder的自定义样式【输入框input /文本域textarea】
7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...
- Bootstrap系列 -- 16. 文本域textarea
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...
- ionic2踩坑之文本域自适应高度(自定义指令,适用angular2)
话不多说,看代码: import { Directive, ElementRef, HostListener,Input, Renderer, Component } from '@angular/c ...
- 文本域textarea的一个小细节
文本域代码在编写时,最好写在一行上,就像: 如果没写在一行上,如: 那么就会在后续生成的页面上输入的时候就会产生一段空白无法删除: 这是写文本框的时候的一个小细节
随机推荐
- Docker与Ceph的分与合
前言 docker是一个管理工具,在操作系统之上提供了一个新的独立轻环境,好处是本地提供了一个基础镜像,然后基于镜像再运行环境,也可以把环境重新打包为镜像,管理起来类似于git,感觉非常的方便,并且能 ...
- Spring Cloud注册中心之Consul
Consul简介 Consul是HashiCorp公司使用Golang语言开发的一中多服务解决方案工具,相比于其他服务注册中心来说,Consul的功能更为强大,丰富,其中最基本的功能包含下面几点(翻译 ...
- [PHP安全特性学习]is_numeric()函数安全漏洞
简介 PHP函数的安全特性-is_numerice() 函数 简介 PHP is_numeric() 函数 is_numeric() 函数用于检测变量是否为数字或数字字符串. 语法: bool is_ ...
- Linux下Docker容器安装与使用
注:作者使用的环境是CentOS 7,64位,使用yum源安装. 一.Docker容器的安装 1.查看操作系统及内核版本,CentOS 7安装docker要求系统为64位.系统内核版本为 3.10及以 ...
- java开发两年了,连个java代理模式都摸不透,你怎么跳槽涨薪?
前言 代理模式(Proxy Pattern),23种java常用设计模式之一.代理模式的定义:代理类对被代理对象提供一种代理以控制对这个对象的访问.代理类主要负责为委托类预处理消息.过滤消息.把消息转 ...
- Xrepo:一个现代化的跨平台 C/C++ 包管理器
xrepo 是一个基于 Xmake 的跨平台 C/C++ 包管理器. 项目源码 官方文档 它基于 xmake 提供的运行时,但却是一个完整独立的包管理程序,相比 vcpkg/homebrew 此类包管 ...
- 了解 MySQL的数据行、行溢出机制吗?
目录 一.行 有哪些格式? 二.紧凑的行格式长啥样? 三.MySQL单行能存多大体量的数据? 四.Compact格式是如何做到紧凑的? 五.什么是行溢出? 六.行 如何溢出? 七.思考一个问题 关注送 ...
- RayFire的下载与安装方法
RayFire的下载与安装方法 发布时间:2020/10/12 近几年,电影中融入了越来越多的动画元素,其中的爆炸场景更是十分吸引眼球.小编不禁好奇,什么样的插件能做出来如此好玩的特效,上网搜索一番发 ...
- 如何用ABBYY FineReader 识别表格
ABBYY FineReader有着强大的OCR文字识别功能,不但可以将文件转换为文本文档或Word文档,也可以识别PDF文件或者图片上的表格,并且转换为Excel文件. 下面小编就使用ABBYY F ...
- css3系列之伪类选择器
Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:n ...