如何移除移动端Chrome输入法中的密码管理器黑条？

移除密码钥匙条的方法 #

Chrome移动端的密码管理模块偶尔会误判文本输入框的场景，即使type="text"也会弹出密码钥匙条，试试以下几种方案：

• 添加精准的自动补全属性
  给输入框明确指定autocomplete属性，告诉浏览器不要启用密码相关的自动补全：

  <input
       className="form-control"
       type="text"
       placeholder={i18n.msgInputPlaceholder}
       onKeyDown={onChatKeyDown}
       onChange={onMessageChange}
       autocomplete="off"
  />
  

  如果autocomplete="off"不生效，换用autocomplete="new-password"——这个属性原本用于密码框，但能强制Chrome跳过密码管理逻辑；或者用autocomplete="one-time-code"这类非密码类的自动补全值。

• 配合禁用自动纠正与大写
  部分场景下，自动纠正或自动大写会让浏览器误判输入场景，配合添加这两个属性强化设置：

  <input
       className="form-control"
       type="text"
       placeholder={i18n.msgInputPlaceholder}
       onKeyDown={onChatKeyDown}
       onChange={onMessageChange}
       autocomplete="off"
       autocorrect="off"
       autocapitalize="none"
  />
  

• 检查页面内的密码输入框
  如果页面其他位置存在type="password"的输入框（包括隐藏的），Chrome可能会全局触发密码管理条。排查页面代码，移除不必要的密码输入框，或者动态控制其显示状态。

保持键盘弹出时内容可见的方案 #

要确保键盘弹出时输入框和消息区域可见，可通过以下方式实现：

• 固定输入框位置
  将输入框设置为固定在页面底部：

  .form-control-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: #fff;
  }
  

  同时给聊天消息容器设置底部内边距，避免输入框遮挡消息：

  .chat-messages {
    padding-bottom: 80px; /* 数值大于输入框高度 */
    overflow-y: auto;
    height: calc(100vh - 100px);
  }
  

• 自动滚动到输入框
  给输入框添加onFocus事件，当输入框获得焦点时自动滚动到可见位置：

  const handleInputFocus = (e) => {
    e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  };
  
  <input
       className="form-control"
       type="text"
       placeholder={i18n.msgInputPlaceholder}
       onKeyDown={onChatKeyDown}
       onChange={onMessageChange}
       onFocus={handleInputFocus}
       autocomplete="off"
  />
  

• 监听键盘高度变化
  通过监听resize事件或visualViewport的变化，动态调整聊天容器的高度：

  window.addEventListener('resize', () => {
    const chatContainer = document.querySelector('.chat-messages');
    const viewportHeight = window.innerHeight;
    chatContainer.style.height = `${viewportHeight - 80}px`; // 80为输入框区域高度
  });
  

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