vue-textarea 自适应高度
需求简介
一个搜索页面,上面输入框,下面列表展示搜索到的结果。
重点是:产品要求搜索框默认显示一行,当输入的文字超过一行时,输入框的高度会随着改变,直到输入完毕。
解决思路设想
本想利用textarea实现,但textarea不支持自适应高度,而是定好高度或者是行数之后,超出部分就会显示滚动条。只能另想。
根据需求,首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号自动变小的技巧,但仔细一琢磨,不行。这个是根据内容元素的个数,进行处理,而这儿是输入框,没有内容元素。
后面想到可以利用html属性contenteditable="true"
,加在div上让其可编辑来模拟自适应高度。可是需要在vue中双向绑定实现,这个不是很好处理。
后面想到利用textarea的row属性,根据输入内容的长度控制row的值,为1-n行,但这个似乎不是很智能,因为多少个字体一行不一定,英文、中文、数字的宽度不一致,而且row属性在每个浏览器中的表现不一致。
最后利用textarea,监听change事件,让其高度=其滚动条高度,来达到高度自适应。
没想到最后还是利用了textarea。
实现
util.js
/**
* 文本框根据输入内容自适应高度
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认0)
* @param {Number} 设置最大高度(可选)
* @callback {Function} 设置回调函数(可选)
*/
export const autoTextarea = function (elem, extra, maxHeight, callback) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
callback(parseInt(style.height));
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};
export const debounce = function (func, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, args);
}, delay || 500);
}
}
说明:由于下面是列表,需要计算高度,为了避免重新再去获取高度,所以加了个回调方法,把高度回调出去。
vue-search.vue
<template>
<div class="search-list">
<div>
<textarea ref="textarea" v-model="keywords" :maxlength="keywordsMax" @change="searchChange"></textarea>
<span class="clear" @click="clearKeywords">x</span>
</div>
<div class="list" ref="list">
<ul>
<li v-for="item in list" :key="item.id">
<span class="icon"></span>
<dl>
<dt>{{item.title}}</dt>
<dd>{{item.desc}}</dd>
</dl>
</li>
</ul>
</div>
</div>
</template>
<script>
import { debounce, autoTextarea } from '@/util.js';
let rootFontSize = parseFloat(document.documentElement.style.fontSize);
export default {
data () {
return {
keywordsMax: 128,
keywords: '',
list: []
}
},
mounted () {
this.$nextTick(() => {
let textarea = this.$refs.textarea;
textarea.focus();
let prevHeight = 65;
textarea && autoTextarea(textarea, 5, 0, (height) => {
height += 20;
if (height !== prevHeight) {
prevHeight = height;
let rem = height / rootFontSize;
this.$refs.list.style.height = `calc(100% - ${rem}rem)`;
}
});
})
},
methods: {
clearKeywords () {
this.keywords = '';
this.list = [];
let textarea = this.$refs.textarea;
let height = 40;
let rem = height / rootFontSize;
textarea.style.height = `${rem}rem`;
rem = (height + 20) / rootFontSize;
this.$refs.list.style.height = `calc(100% - ${rem}rem)`;
textarea.focus();
},
searchChange: debounce(function () {
let trim = this.keywords.trim();
if (!trim) {
this.list = [];
return;
}
const params = {
keywords: this.keywords
}
// 调api ...
})
}
}
</script>
补充div模拟textarea自适应
<style>
.textarea{
width: 400px;
min-height: 20px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
line-height: 24px;
padding: 2px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
<div class="textarea" contenteditable="true"></div>
vue-textarea 自适应高度的更多相关文章
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
- 简单实现一个textarea自适应高度
textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度. 预览地址:textarea ...
- js实现textarea自适应高度
html结构: <div class="container" id="container"> <div class="text-wr ...
- jquery文本框textarea自适应高度
浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id=&quo ...
- Textarea自适应高度 JS实现,兼容IE6\7\8\9\10\11
<!DOCTYPE html> <html> <head> <title>autoresizing textarea</title> < ...
- textarea 自适应高度
试了好多方法,包括百度了好多.一旦接口获取的内容,就不好用了.有时候就是脑袋转不过来,想了好久的方法居然那么简单,然后,脑洞大开,忽然想到还可以这样弄, 很简单,两句话 var textareaHei ...
- 将textarea实现自适应高度及IE下滚动条不出现的bug
1.<el-table-column label="备注" width="180"> <template scope="scope& ...
- div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
随机推荐
- F7里利用DIV 模拟 textarea 显示回行的问题解决
<div class="card-content-inner" style="word-wrap:break-word;word-break:break-all;w ...
- Final Cut Pro X for Mac(FCPX专业视频剪辑工具)实用技巧篇!
Final Cut Pro X for Mac是一款非常强大的专业视频剪辑工具,全球很多人都在用!现在小编给大家带来一些关于Final Cut Pro X for Mac的使用技巧,希望对大家以后的应 ...
- gulp 粗粗学习 记录下
看视频学习 粗粗记录下 以便以后学习 1.初记录 gulp.task //定义一个任务 gulp.src //锁定到做task任务的文件路径 gulp.dest //锁定到任务做完后文件去向的路径 g ...
- 输入a,b,求a^b的所有因子之和
题目 poj的1845 分解a的质因数a=p1^t1*p2^t1........ 每个质因数对sum的贡献: 当除去质因数p1时的因数和为sum,当计入p1时,因子和变成sum*p1^0+sum*p1 ...
- java TripleDES加密
package com.zhx.base.util; import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher ...
- linux学习--2019-04-22
1.写命令,vi编辑器 1)vi 文件名 2) 按 ‘i’ 进入编辑模式 3)编写完成后,按Esc,然后输入 “:wq” 推出编辑.(“q!”不存盘,强制退出vi) 2.命令补全 “Tab” 3.获取 ...
- Adams 2013自定义插件方法zz
1.Adams插件介绍 Adams的高级模块(如Controls控制模块.Vibration振动模块.Durability耐久性模块等)是以插件的形式集成在Adams软件中.通过Adams提供的插件管 ...
- sql基本语法
sql基本语法 sql server 查询 多表查询 直接多表查询 select * from st_profiles,st_score_report 上面的语句将会产生两个表的笛卡尔乘积,其中大部分 ...
- SDN网络虚拟化中有效协调的映射算法
来自论文An efficient and coordinated mapping algorithm in virtualized SDN networks,来自期刊<信息与电子工程前沿> ...
- VB用API模拟截屏键PrintScreen
很多人用 SendKeys "{PRTSC}" 模拟截屏键 PrintScreen 的时候提示<错误:'70' 拒绝的权限>,于是经常遇到人问...干脆写下来 '声明 ...