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

Question

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

Answer 1

您可以覆盖 <form> 元素的 onsubmit 函数。默认情况下，表单会删除所有 <input> 的内容并将内容发送到您的 action 属性中指定的任何内容。如果要覆盖此行为，只需在 submit 事件上调用 preventDefault 方法即可。示例：

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 2

聚焦输入文本区域，这样您就会聚焦在文本区域上，键盘会出现在屏幕上。

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

Answer 3

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

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

现在您的注意力将留在 textarea 上。希望这会有所帮助。

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

I have created a chat box with submit button but text area losing focus on clicking submit button

html

javascript

jquery

chat