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

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. 查看ceph集群被哪些客户端连接

    前言 我们在使用集群的时候,一般来说比较关注的是后台的集群的状态,但是在做一些更人性化的管理功能的时候,就需要考虑到更多的细节 本篇就是其中的一个点,查询ceph被哪些客户端连接了 实践 从接口上来说 ...

  2. zabbix自动发现的python方式数据生成

    前言 zabbix里面有个功能是自动发现,比如文件系统和网卡的获取的时候,因为预先无法知道这个网卡的名称,所以就有了这个自动发现的功能,这里我是因为要用到存储池的自动发现,所以需要对数据进行生成 实现 ...

  3. bootstrap-datetimepicker 编辑回显

    官网上居然没给出解决方案....汗 stackoverflow给出了灵感: $("#dateOfManufacture").find("input").val( ...

  4. C#设计模式——代理模式(Proxy Pattern)

    引言 在我们的生活中,经常会遇到需要什么东西,但是自己又不是很方便或者对方不是很方便,则就需要中间的一个代理人去解决.例如代购.在软件开发中,也会遇到这样的问题.有些对象有时候会由于网络或其他的障碍, ...

  5. powershell过杀软工具-xencrypt

           在红队攻击中,绕杀软是一个比较常见的技术.对于绕过杀软的方法,有基于黑白名单的,有基于shellloader的,也有基于加密与混淆的.最近在发现了这样一款过杀软的工具,推荐给有缘人,嘻嘻 ...

  6. go返回json数据

    package main import ( "encoding/json" ) type Repay struct { Code uint64 `json:"code&q ...

  7. ASP.NET Core管道详解[3]: Pipeline = IServer + IHttpApplication

    ASP.NET Core的请求处理管道由一个服务器和一组中间件构成,但对于面向传输层的服务器来说,它其实没有中间件的概念.当服务器接收到请求之后,会将该请求分发给一个处理器进行处理,对服务器而言,这个 ...

  8. 新鲜出炉!阿里巴巴,京东,美团面经汇总,已拿offer!

    最近在后台收到了很多小伙伴的私信,说自己最近想好好准备一下,在不久后的秋招跳个槽往大厂冲击一下,想要我给大家整理出一份大厂面试题好用来做好准备.之前公司有点事比较忙就没回私信.最近好一点了我也是立马联 ...

  9. 全面解析RayFire的动态对象与静态对象

    我们在日常使用RayFire的过程中,接触得比较多的应该就是RayFire的对象设置了.RayFire的对象包含了动态对象.静态对象与休眠对象,其中动态对象.静态对象可以结合动力学.运动学概念设置动作 ...

  10. jQuery 第八章 实例方法 遍历索引

    遍历索引相关方法: .each() .index() ------------------------------------------------- .each() 有点像数组的 forEach( ...