将textarea实现自适应高度及IE下滚动条不出现的bug
1.<el-table-column label="备注" width="180">
<template scope="scope">
<el-input
class="remark"
:readonly="Todisabled"
type="textarea"
:rows="calcRows(scope.row.remarks)"
v-model="scope.row.remarks"
placeholder="请输入内容">
</el-input>
</template>
</el-table-column>
2.element-ui的<el-textarea>文本框是不能自适应高度的,且如果将其设为只读disabled在IE9+下是不出现滚动条的,
这样会给使用人员造成误解,下面就如何将textarea设为自适应高度做以下解读:
3.解决IE9+下不出现滚动条的问题:
将disabled改为readonly,textarea的disabled在IE下是显示不出滚动条的,因此要想实现此功能,将disabled改为readonly,然后再去改变readonly下的样式;
textarea[readonly]{//所有disabled改为readonly
background-color: #eef1f6;
cursor: not-allowed;
}
4.解决高度不能自适应的问题:
如果不想定高,超出部分隐藏,而是要有多少内容显示多少,可以借助element-ui的<el-textarea>的rows属性,输入框行数,只对 type="textarea" 有效,为number,
这里想要实现自动变换高度,就应该将rows绑定为一个变量,这里:rows="calcRows(scope.row.remarks)",calcRows为vue,computed(){}里的一个计算属性,
calcRows(text) {
if (!text) return 2
const arr = text.match(/\n/g)
return arr ? arr.length + 2 : 2
},
将calcRows绑定在rows上,即可实现文本域高度自适应。
将textarea实现自适应高度及IE下滚动条不出现的bug的更多相关文章
- textarea框自适应高度
export function autoTextarea(elem, extra, maxHeight){ /**textarea文本域随内容的多少而调整高度 */ extra = extra || ...
- textarea如何实现高度自适应?
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- textarea如何实现高度自适应(一)
转自轩枫阁 - http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 方法一:div模 ...
- 自适应高度输入框(contenteditable/textarea)
一.用div模拟textarea div模拟输入域可以根据输入内容自动伸缩,而input和textarea输入内容较多时,高度固定,内容会显示不全. 1.坑1(IOS端无法输入) 在取消全局默认样 ...
- div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
- Textarea高度随内容自适应地增长,无滚动条
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- psutil 跨平台根据程序名杀进程
笔者在项目中遇到过需要根据进程名杀进程的需求,利用python库psutil实现了此功能. 模块地址: https://pypi.python.org/pypi/psutil/ psutil功能 ...
- Python 多进程 多线程 协程 I/O多路复用
引言 在学习Python多进程.多线程之前,先脑补一下如下场景: 说有这么一道题:小红烧水需要10分钟,拖地需要5分钟,洗菜需要5分钟,如果一样一样去干,就是简单的加法,全部做完,需要20分钟:但是, ...
- 阿里云负载不支持 WebSocket 协议与 WSS 和 Nginx 配置问题
WebSocket 是 HTML5 下一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的.它与HTTP一样通过已建立的TCP连接来传输数据,但是它和HTT ...
- OSGI动态加载删除Service bundle
OSGi模块化框架是很早就出来的一个插件化框架,最早Eclipse用它而出名,但这些年也没有大热虽然OSGi已经发布了版本1到版本5.现在用的最多的,也是本文讲述基于的是Equinox的OSGi实现, ...
- 手把手教你封装 Vue 组件并使用 NPM 发布
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...
- Android返回系统Home桌面
Intent intent = new Intent(); // 为Intent设置Action.Category属性 intent.setAction(Intent.ACTION_MAIN);// ...
- JavaScript -- Navigator
-----040-Navigator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
- python的Web框架,Django模板标签及模板的继承
模板标签 在传递数据的时候,会有大量的数据展示在浏览器上,而数据会是动态变化的,在html的编写中,数据也是需要动态的,而不能是写死的,如果动态展示呢. 给定的例子数据 views传递数据给html ...
- c# 读取机器CPU信息,硬盘信息,网卡信息
Windows 管理规范 (WMI) 是可伸缩的系统管理结构,它采用一个统一的.基于标准的.可扩展的面向对象接口.WMI 为您提供与系统管理信息和基础 WMI API 交互的标准方法.WMI 主要由系 ...
- Unity3D学习笔记第一课
第一课程:1.Unity类名必须与文件名保持一致2.讲属性设置为public可以在Unity中访问 public float speed; // Use this for initialization ...