文本域自动换行、高度自增,采用以下方式:

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高度自增、自动换行的更多相关文章

  1. textarea文本域的高度随内容的变化而变化

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...

  2. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  3. 文本域textarea

      文本域 CreateTime--2017年5月23日15:12:08Author:Marydon 二.文本域 (一)语法 <textarea></textarea> (二) ...

  4. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  5. 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。

    问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...

  6. palacehoder的自定义样式【输入框input /文本域textarea】

    7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...

  7. Bootstrap系列 -- 16. 文本域textarea

    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...

  8. ionic2踩坑之文本域自适应高度(自定义指令,适用angular2)

    话不多说,看代码: import { Directive, ElementRef, HostListener,Input, Renderer, Component } from '@angular/c ...

  9. 文本域textarea的一个小细节

    文本域代码在编写时,最好写在一行上,就像: 如果没写在一行上,如: 那么就会在后续生成的页面上输入的时候就会产生一段空白无法删除: 这是写文本框的时候的一个小细节

随机推荐

  1. kali 系列学习12-使用Wifite破解无线网络

    一些破解无线网络程序是使用Aircrack-ng工具集,并添加了一个图形界面或使用文本菜单的形式来破解无线网络.这使得用户使用它们更容易,而且不需要记住任何命令.本节将介绍使用命令行工具Wifite, ...

  2. Hadoop大数据平台节点的动态增删

    环境:CentOS 7.4 (1708  DVD) 工具:MobaXterm 一. 节点的动态增加 1. 为新增加的节点(主机)配置免密码登录.使用ssh-keygen和ssh-copy-id命令(详 ...

  3. Mac下载工具folx如何下载常用的软件

    最近,多档综艺节目都开展得如火如荼,比如<中国新说唱>.<这就是街舞>等深受年轻人喜欢的综艺节目.虽然手机端也可观看,但可以的话,当然是使用电脑屏幕观看节目比较过瘾. 接下来, ...

  4. 如何使用ABBYY FineReader 的用户模式?

    在运用ABBYY FineReader 15(Windows系统)进行文档识别时,用户可能会遇到识别的文档包含一些特殊字符或者其他软件无法识别的字体等情况,容易造成识别出现乱码的结果.在这种情况下,用 ...

  5. OCR之前这些因素必须考虑到!

    用久了ABBYY FineReader 14OCR文字识别软件,相信大家都知道图像质量对OCR质量有很大的影响,本文将给大家讲解下在识别图像之前,有哪些因素需要考虑到! 1.OCR语言 ABBYY F ...

  6. Mac虚拟环境安装django

    安装:pip3 install virtualenv 创建:Virtualenv env01 激活:Source env01/bin/activate django安装:pip3 install dj ...

  7. 安装卸载nginx

    http://www.nginx.cn/install ubuntu和debain下的apt方式安装软件很方便,特别是对于新手安装和卸载nginx. 由于nginx不能动态添加模块,所以会经常安装和卸 ...

  8. 【mq读书笔记】mq消息存储

    comitlog文件 ConsumerQueue文件 IndexFile文件 RocketMQ将所有主题的消息存储在同一个文件中,确保消息发送时顺序写文件. 为了提高消息消费的效率RocketMQ引入 ...

  9. JZOJ2020年8月11日提高组T1 密码

    JZOJ2020年8月11日提高组T1 密码 题目 Description 在浩浩茫茫的苍穹深处,住着上帝和他的神仆们,他们闲谈着下界的凡人俗事,对人世间表现的聪明智慧,大加赞赏.今天他们正在观赏大地 ...

  10. CSP2020复赛游记

    CSP2020复赛游记 由于本蒟蒻侥幸通过PJ和TG的分数线并且侥幸的拿了一等,所以侥幸的来参加复赛 11.04~11.05 期中考,挂 11.06 对答案,炸 11.07 开始了第一次CSP复赛 坐 ...