最近在使用html技术制作移动端app界面,碰到了输入框的问题,经过网上搜索的方法只实现一部分的效果,灵机一动想到了解决问题的办法,记录一下,让有需要的同学少走弯路。
我要制作的效果是输入框自适应高度增加减少,当输入大于三行之后保持输入框三行高度,类似QQ聊天的输入框那样,要是没懂就打开手机,进入QQ输入试试。
使用textarea多行输入文本框
html及css代码,css可自行修改
<textarea id="message_input"
οninput="inputAutoHeight(this);"></textarea>
#message_input{
width: 96%;
height: 20px;
overflow-y:auto;
font-family:none; /* 字体设置为默认字体 */
margin-left: 2%;
margin-top: 4px;
margin-bottom: 4px;
border: 0px;
outline: none;
background: transparent; /* 输入框背景跟随父级 */
resize:none; /* 右下角图标去除 */
}
监听 textarea 的 oninput 事件来自适应高度
js代码部分
function inputAutoHeight(inputElement){
if( parseInt(inputElement.scrollHeight) < 63) {
inputElement.style.height = '';
inputElement.style.height = inputElement.scrollHeight+'px';
}
else{
inputElement.style.height = '62px';
}
}
js代码解析(不求甚解的同学可以回头了)
这里有几个点需要注意,首先是 63 这个数值是刚好 textarea 输入框三行的高度,这个需要看个人对字体大小的设置以及需求。
inputElement.style.height = '';
inputElement.style.height = inputElement.scrollHeight+'px';
再是 if 内的代码块,第一句代码的是删除文字高度自适应的重要代码,第二句是高度自适应的核心代码,动态将 textarea 的高度设置成滚动框的滚动高度。原理是当高度固定了之后, textarea 输入框的scrollHeight高度会等于当前的高度,所以导致了输入框的高度只能增加而不能降低,通过第一句代码将高度设置为空之后,scrollHeight的高度变成了当前滚动框的高度,可以理解为当前编辑的文本高度,再由第二句代码将高度设置为滚动高度,就可实现自适应的问题。
还有一个是高度的问题要提一下,即 if 代码块中的第二句赋值需在后面拼接一个 “px” 文本才能生效。
inputElement.style.height = '62px';
最后是 else 代码块的这一行,为什么要等于 62px 呢?这跟我需要的功能有关系,我所实现的功能是显示三行文本,多余三行文本时输入框要保持三行的高度,不再增加高度,防止用户输入过多遮挡整个屏幕,降低用户体验。
看的仔细的高手可能就会问了,不写这一行,当scrollHeight的高度大于 63px (也就是三行高度的时候),不就不再增加高度了吗(因为输入框的高度是在 if 内赋值)?
没错,大于三行之后是不再增加了,可我要是删除文字呢?因为当高度固定了之后, textarea 输入框的scrollHeight高度会等于当前的高度,所以会导致height的高度始终固定在三行而无法进入 if 语句块动态赋值高度。
那我要是把这个高度设为空的话不行吗?还可以跟 if 语句块的赋空值合并,减少代码量,增加代码简洁度,何乐而不为?
你以为我没干过吗?当大于三行之后界面就翻车了,那为什么选 62px ?当然是为了视觉效果和三行差不多啦。其实只要比接近三行的高度略小一点就可以,一点点就够了,这样就能够保证视觉效果上和三行没有区别。
后记(都看到这里了,不点个赞分享给朋友吗?)
除了 textarea 多行文本框可以用作这种效果之外,div 框也能够用以模拟这种多行输入
html代码
<div contenteditable="true"
id="message_input"
οninput="inputAutoHeight(this);"></div>
经过测试也是效果也是一样的,但是在手机上粘贴消息这类的功能支不支持我就不知道了。