首页 > 解决方案 > 在网络聊天机器人中发送消息后,如何在 Android 上继续显示虚拟键盘?

问题描述

我们有一个使用机器人框架的聊天机器人。前端使用 Bot Framework 网络聊天组件 ( https://github.com/microsoft/BotFramework-WebChat ) 通过直线连接到它。

我们在我们的网站上使用此聊天机器人,该聊天机器人还为使用虚拟键盘的移动用户(Android / iOS)提供服务。到目前为止,我们只能在 Android 上测试我们的代码。

当用户点击聊天机器人文本框时,虚拟键盘就会出现。用户键入消息并按下键盘上的回车键。消息已发送,用户仍可以看到键盘以发送另一条消息。到目前为止一切都很好。

但是如果用户使用按钮而不是回车键发送消息,虚拟键盘就会消失。

带有橙色箭头的 Enter 键和带有红色箭头的发送按钮

这意味着喜欢发送按钮而不是回车键的用户每次发送消息时都必须单击文本框以重新打开键盘。这种行为很烦人,我们不想惹恼我们的用户。所以我的任务是解决这个问题。

我尝试使用以下内容显示键盘:

var buttons = document.getElementsByClassName("webchat__icon-button");
for (i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", focusChatbotInput);
}                

function focusChatbotInput() {
  let textbox = document.getElementsByClassName("webchat__send-box-text-box__input")[0];
  if (textbox) {
    textbox.focus();
  }
}

我还尝试focusChatbotInput从整个网络聊天 div 的点击事件中调用。当用户单击 div 中的任何位置(发送按钮除外)时,这确实会打开键盘。

我还尝试制作自己的自定义发送按钮来调用

<button onclick="focusChatbotInput(); document.getElementsByClassName("webchat__icon-button")[1].click();">Send</button>

这没有用。

似乎发送按钮单击事件处理程序中的库中的某些内容中断了对文本框的关注。

有人知道如何解决这个问题吗?任何帮助表示赞赏。提前致谢!

标签: javascriptdirect-line-botframeworkvirtual-keyboardweb-chat

解决方案


推荐阅读