Captaincasa框架：如何禁用touchfieldnumeric文本输入框阻止手机键盘弹出

问题背景 #

使用touchfieldnumeric组件时，通过按键输入会触发关联的文本输入框意外获焦，导致手机触摸键盘弹出，影响交互体验。

正式解决方案（框架更新后） #

框架已完成更新，现在支持直接禁用组件对应的输入框功能。只需开启组件的禁用配置（具体参数参考框架文档，通常为设置disabled属性为true），即可阻止输入框获焦，彻底避免键盘弹出。

临时兼容方案（未升级框架时） #

如果暂时无法更新框架，可通过以下两种方式临时修复：

• 监听并阻止焦点事件：给组件的输入框绑定focus事件，触发时强制失焦：

  const numInput = document.querySelector('[data-component="touchfieldnumeric"] input');
  numInput.addEventListener('focus', function(e) {
    e.target.blur();
  });
  

• 设置输入框只读：为输入框添加readonly属性，既保留组件的按键交互，又不会触发键盘：

  <input type="number" readonly class="touchfieldnumeric__input" />
  

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