产品经理：实现一个微信输入框

近期在开发AI对话产品的时候为了提升用户体验增强了对话输入框的相关能力，产品初期阶段对话框只是一个单行输入框，导致在文本内容很多的时候体验很不好，所以进行体验升级，类似还原了微信输入框的功能（只是其中的一点点哈🤏）。

初期认为这应该改动不大，就是把input换成textarea吧。但是实际开发过程发现并没有这么简单，本文仅作为开发过程的记录，因为是基于uniapp开发，相关实现代码都是基于uniapp。

简单分析我们大概需要实现以下几个功能点：

• 默认单行输入
• 可多行输入，但有最大行数限制
• 超过限制行术后内容在内部滚动
• 支持回车发送内容
• 支持常见组合键在输入框内换行输入
• 多行输入时高度自适应 & 页面整体自适应

单行输入

默认单行输入比较简单直接使用input输入框即可，使用textarea的时候目前的实现方式是通过设置行内样式的高度控制，如我们的行内高度是36px，那么就设置其高度为36px。为什么要通过这种方式设置呢？因为要考虑后续多行输入超出最大行数的限制，需要通过高度来控制textarea的最大高度。

<textarea style="{ height: 36px }" />

多行输入

多行输入核心要注意的就是控制元素的高度，因为不能随着用户的输入一直增加高度，我们需要设置一个最大的行数限制，超出限制后就不再增加高度，内容可以继续输入，可以在输入框内上下滚动查看内容。

这里需要借助于uniapp内置在textarea的@linechange事件，输入框行数变化时调用并回传高度和行数。如果不使用uniapp则需要对输入文字的长度及当前行高计算出对应的行数，这种情况还需要考虑单行文本没有满一行且换行的情况。

代码如下，在linechange事件中获取到最新的高度设置为textarea的高度，当超出最大的行数限制后则不处理。

linechange(event) {
    const { height, lineCount } = event.detail
    if (lineCount < maxLine) {
        this.textareaHeight = height
    }
}

这是正常的输入，还有一种情况是用户直接粘贴内容输入的场景，这种时候不会触发@linechange事件，需要手动处理，根据粘贴文本后的textarea的滚动高度进行计算出对应的行数，如超出限制行数则设置为最大高度，否则就设置为实际的行数所对应的高度。代码如下：

const paddingTop = parseInt(getComputedStyle(textarea).paddingTop);
const paddingBottom = parseInt(getComputedStyle(textarea).paddingBottom);
const textHeight = textarea.scrollHeight - paddingTop - paddingBottom;
const numberOfLines = Math.floor(textHeight / lineHeight);

if (numberOfLines > 1 && this.lineCount === 1) {
    const lineCount = numberOfLines < maxLine ? numberOfLines : maxLine
    this.textareaHeight = lineCount * lineHeight
}

键盘发送内容

正常我们使用电脑聊天时发送内容都是使用回车键发送内容，使用ctrl，shift，alt等和回车键的组合键将输入框的文本进行换行处理。所以接下来要实现的就是对键盘事件的监听，基于事件进行发送内容和内容换行输入处理。

首先是事件的监听，uniapp不支持keydown的事件监听，所以这里使用了原生JS做监听处理，为了避免重复监听，对每次开始监听前先进行移除事件的监听，代码如下：

this.$refs.textarea.$el.removeEventListener('keydown', this.textareaKeydownHandle)
this.$refs.textarea.$el.addEventListener('keydown', this.textareaKeydownHandle)

然后是对textareaKeydownHandle方法的实现，这里需要注意的是组合键对内容换行的处理，需要获取到当前光标的位置，使用textarea.selectionStart可获取，基于光标位置增加一个换行\n的输入即可实现换行，核心代码如下：

const cursorPosition = textarea.selectionStart;
if(
    (e.keyCode == 13 && e.ctrlKey) ||
    (e.keyCode == 13 && e.metaKey) ||
    (e.keyCode == 13 && e.shiftKey) ||
    (e.keyCode == 13 && e.altKey)
){
    // 换行
    this.content = `${this.content.substring(0, cursorPosition)}\n${this.content.substring(cursorPosition)}`
}else if(e.keyCode == 13){
    // 发送
    this.onSend(); 
    e.preventDefault();
}

高度自适应

当多行输入内容时输入框所占据的高度增加，导致页面实际内容区域的高度减小，如果不进行动态处理会导致实际内容会被遮挡。如下图所示，红色区域就是需要动态处理的高度。

主要需要处理的场景就是输入内容行数变化的时候和用户粘贴文本的时候，这两种情况都会基于当前的可视行数计算输入框的高度，那么内容区域的高度就好计算了，使用整个窗口的高度减去输入框的高度和其他固定的高度如导航高度和底部安全距离高度即是真实内容的高度。

this.contentHeight = this.windowHeight - this.navBarHeight - this.fixedBottomHeight - this.textareaHeight;

最后

到此整个输入框的体验优化核心实现过程就结束了，增加了多行输入，组合键换行输入内容，键盘发送内容，整体内容高度自适应等。整体实现过程的细节功能点还是比较多，有实现过类似需求的同学欢迎留言交流～

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）