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的一个小细节
文本域代码在编写时,最好写在一行上,就像: 如果没写在一行上,如: 那么就会在后续生成的页面上输入的时候就会产生一段空白无法删除: 这是写文本框的时候的一个小细节
随机推荐
- [原题复现]2018护网杯(WEB)easy_tornado(模板注入)
简介 原题复现: 考察知识点:模板注入 线上平台:https://buuoj.cn(北京联合大学公开的CTF平台) 榆林学院内可使用信安协会内部的CTF训练平台找到此题 [护网杯 2018]eas ...
- Java 中常见的细粒度锁实现
上篇文章大致说了下 ReentrantLock 类的使用,对 ReentrantLock 类有了初步的认识之后让我们一起来看下基于 ReentrantLock 的几种细粒度锁实现. 这里我们还是接着用 ...
- 使用Camtasia给视频课件添加自动聚焦的效果
随着现在抖音与微课市场的大火,原来可能只是因为兴趣爱好而剪辑制作了一些视频为爱发电,现在却完全可以当作一个事业来做了. 但是课件录制的时候,大部分的录制屏幕软件都是全屏或者固定屏幕大小录制的,有些小细 ...
- Postman实用小技巧
Postman使用小技巧 软件测试工程师 张江涛 废话就不多说了,直奔主题,这里的技巧就以对话方式来阐述吧. 问:公司的环境也太多了吧,本地.开发.测试以及生产环境,这么多环境,每次使用的时候都要来回 ...
- leetcode 33和 leetcode81 II
//接上上一篇博客,继续这个题目,现在数组中会有重复元素,情况将会变得十分复杂,比如说1,1,1,1,1 或者1,1,3,1再来 3,3,3,1,1,1,3,这些都是可以的,都是符合题目要求的,如 ...
- 开源认证和访问控制的利器keycloak使用简介
目录 简介 安装keycloak 创建admin用户 创建realm和普通用户 使用keycloak来保护你的应用程序 安装WildFly client adapter 注册WildFly应用程序 安 ...
- dubbo起停之服务暴露
由上一节可知带上dubbo@Service注解的对象,在注册成为bean之后会进一步注册一个ServiceBean,服务暴露便是在这里 public void afterPropertiesSet() ...
- mysql 优化数据类型
1.更小的通常更好 选择不会超过范围的最小类型 2.简单就好 例如,整型比字符操作代价更低,因为字符集和校对规则(排序规则)使字符比较比整形比较更复杂. 3.尽量避免null 如果查询中包含可为nul ...
- webgl智慧楼宇发光效果算法系列之高斯模糊
webgl智慧楼宇发光效果算法系列之高斯模糊 如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇 ...
- Maven 依赖树的解析规则
对于 Java 开发工程师来说,Maven 是依赖管理和代码构建的标准.遵循「约定大于配置」理念.Maven 是 Java 开发工程师日常使用的工具,本篇文章简要介绍一下 Maven 的依赖树解析. ...