我创建了一个带有提交按钮的聊天框，但文本区域在单击提交按钮时失去了焦点

Question

在我的移动网站中，我有一个聊天功能，基本上有一个显示区域、要写入的文本区域和一个用于提交文本的发送按钮，问题是当我在文本区域中写入文本时，移动键盘会弹出，当我点击发送时按钮失去焦点并提交移动设备的文本和键盘消失我的要求是键盘不应在单击发送按钮时消失。

Answer 1

可能您正在使用 click() 函数来发送消息，对于触摸设备，您可以简单地使用“touchend”事件，如下所示：

$(document).on('touchend', 'selector' ,function(){
    //you code goes here
});

现在您的注意力仍将集中在文本区域上。 希望这会有所帮助。

Answer 2

您可以覆盖

onsubmit

元素的

<form>

函数。 默认情况下，表单会删除所有

<input>

的内容，并将内容发送到

action

属性中指定的任何位置。 如果您想覆盖此行为，只需在

preventDefault

事件上调用

submit

方法即可。样品：

var form = document.getElementById('my-form');
var input = document.getElementById('my-input');

form.onsubmit = function (event) {
  // Prevent the form from sending the content
  // and deleting it afterwards
  event.preventDefault();
  
  // Focus the input element again
  input.focus();
  
  // Send the content via ajax to your endpoint
  alert('sending content...');
}

<form id="my-form" action="/message" method="POST">
  <input type="text" id="my-input" />
  <input type="submit" value="send" />
</form>

Answer 3

聚焦输入文本区域，以便您将焦点放在文本区域上，并且键盘出现在屏幕上。

在您提交数据的java脚本函数中使用input.focus()。如果您直接提交数据，则更改代码，并在ajax请求和响应完成后再次聚焦文本框

Answer 4

@Cœur，我可以知道你是如何在 jquery 中创建聊天窗口的吗？我目前创建了一个带有文本区域的区域，该区域仅包含文本而不是图像。我想知道可以在图像中插入文本或在图像中附加文本的组件