嘿，这个问题我之前在项目里碰到过好几次，大概率是页面里的事件冲突或者浏览器/系统的默认行为搞的鬼。给你几个实用的排查和解决思路：

先排查潜在的冲突原因 #

• 检查页面里有没有其他JS逻辑绑定了click/focus事件，在Textarea被点击时偷偷调用了blur()？比如某些自定义表单组件、弹窗逻辑，可能不小心触发了失焦操作。可以先临时注释掉非核心JS代码，测试下是否恢复正常。
• 移动端场景下，部分浏览器（比如iOS Safari）或者第三方库（下拉刷新、滚动组件）会干扰输入框的焦点状态，比如页面滚动后自动失焦，或者组件的事件拦截了点击行为。

具体解决方法 #

方法1：强制聚焦+阻止事件冒泡/默认行为 #

有时候直接手动触发聚焦，同时阻止事件向上冒泡和默认行为，能解决冲突：

const targetTextarea = document.querySelector('textarea');
targetTextarea.addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件传递到父元素，避免触发父元素的干扰逻辑
  e.preventDefault(); // 阻止可能的浏览器默认行为
  this.focus(); // 强制让Textarea获得焦点
});

方法2：延迟触发聚焦（适配移动端浏览器） #

部分移动端浏览器的焦点处理有延迟，用setTimeout稍作延迟再触发聚焦，能绕过系统的限制：

const targetTextarea = document.querySelector('textarea');
targetTextarea.addEventListener('click', function() {
  setTimeout(() => {
    this.focus();
  }, 100); // 100ms的延迟足够适配大多数场景，可根据实际调整
});

方法3：检查CSS的pointer-events属性 #

如果Textarea或者它的父元素被设置了pointer-events: none，会导致点击无法触发焦点，先确认并修正这个属性：

/* 确保Textarea的pointer-events是默认的auto状态 */
textarea {
  pointer-events: auto !important; /* 必要时用!important覆盖其他样式 */
}

方法4：iOS Safari专属处理 #

iOS的Safari对输入框焦点有特殊限制，可以尝试用touchstart事件替代click，并配合延迟聚焦：

const targetTextarea = document.querySelector('textarea');
targetTextarea.addEventListener('touchstart', function(e) {
  e.preventDefault(); // 阻止默认的触摸行为，避免冲突
  setTimeout(() => {
    targetTextarea.focus();
  }, 50);
});

额外排查技巧 #

如果以上方法都没效果，打开浏览器开发者工具（F12）：

1. 在Elements面板查看Textarea的事件监听，看看有没有额外的绑定事件在干扰；
2. 在Console面板手动输入document.querySelector('textarea').focus()，如果能正常聚焦并弹出键盘，说明是页面JS逻辑的问题，否则可能是浏览器/系统的特殊限制。

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