如何使用jQuery实现输入提交后软键盘不自动收起

该需求完全可以通过jQuery实现。
软键盘自动收起的根本原因是：点击发送按钮后，textarea输入框失去焦点，移动端浏览器检测到无聚焦的输入类元素，就会自动收回软键盘。所以解决方案的核心就是发送消息后保持输入框的焦点状态即可。

实现代码示例 #

1. 点击发送按钮场景 #

$('#sendBtn').click(function(e) {
  // 阻止按钮默认行为，避免自动夺走输入框焦点
  e.preventDefault();

  // 原有发送消息逻辑
  const content = $('#chatInput').val().trim();
  if (content) {
    // 此处写消息提交、渲染聊天记录等逻辑
    // ...
    // 发送完成后清空输入框（按需保留）
    $('#chatInput').val('');
  }

  // 关键逻辑：重新给输入框设置焦点
  $('#chatInput').focus();
});

2. 回车键发送场景 #

$('#chatInput').keydown(function(e) {
  // 回车发送、shift+回车换行的常规逻辑
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    const content = $(this).val().trim();
    if (content) {
      // 原有发送逻辑
      // ...
      $(this).val('');
    }
    // 该场景下输入框本身未失焦，无需额外调用focus，仅需阻止默认回车换行行为即可
  }
});

3. 异步发送场景适配 #

如果发送消息需要调用后端接口，要把焦点设置逻辑放到异步回调中执行，避免异步流程触发意外失焦：

$('#sendBtn').click(function(e) {
  e.preventDefault();
  const content = $('#chatInput').val().trim();
  if (!content) return;

  $.post('/api/message/send', { content: content }, function(res) {
    // 接口返回后处理渲染逻辑
    renderMessage(res.data);
    $('#chatInput').val('');
    // 异步完成后再设置焦点
    $('#chatInput').focus();

    // 部分安卓机型兼容方案：设置光标到输入框末尾，强制唤起软键盘
    const inputDom = $('#chatInput')[0];
    const len = inputDom.value.length;
    inputDom.setSelectionRange(len, len);
  })
});

注意事项 #

• 不要在发送逻辑中主动调用输入框的blur()方法，会直接触发软键盘收起
• 如果你的发送按钮是<button>元素，默认type为submit，如果放在form标签内，除了e.preventDefault()之外也可以把按钮type设置为button避免表单默认提交行为夺走焦点

内容的提问来源于stack exchange，提问作者Madhavi Thotta