能否用JavaScript/PHP实现输入框聚焦时自动切换半宽平假名与全宽片假名输入法？

这个需求是可行的，但实现效果会受浏览器API支持度和用户输入法类型的影响，具体实现思路和注意事项如下：

• 借助输入框聚焦事件触发输入法切换
  主流浏览器（Chrome、Firefox、Edge）目前仍支持document.execCommand()的相关命令来控制日文输入法状态，可通过以下命令实现切换：

  • 切换至半宽平假名：document.execCommand('ime-mode', false, 'hiragana')
  • 切换至全宽片假名：document.execCommand('ime-mode', false, 'katakana')

  示例代码：

  <input type="text" class="hira-input" placeholder="半宽平假名输入">
  <input type="text" class="kata-input" placeholder="全宽片假名输入">
  
  <script>
    const hiraInput = document.querySelector('.hira-input');
    const kataInput = document.querySelector('.kata-input');
  
    hiraInput.addEventListener('focus', () => {
      document.execCommand('ime-mode', false, 'hiragana');
    });
  
    kataInput.addEventListener('focus', () => {
      document.execCommand('ime-mode', false, 'katakana');
    });
  </script>
  

• 关键注意事项

  • 输入法兼容性：仅系统自带的日文输入法（如Windows微软日文输入法、Mac日文输入法）对该命令响应良好，部分第三方输入法可能不支持通过JS强制切换状态。
  • API替代方案：document.execCommand()已被标记为废弃，未来可能被移除。可尝试使用inputmode属性作为辅助，该属性能向浏览器和输入法传递输入偏好建议，但无法强制切换：

    <input type="text" inputmode="kana" class="hira-input">
    

  • 输入内容校验：即使实现了自动切换，用户仍可手动更改输入法状态。若需严格限制输入内容，建议在表单提交时添加正则校验：
    • 半宽平假名校验正则：/^[\uFF61-\uFF9F]+$/
    • 全宽片假名校验正则：/^[\u30A0-\u30FF]+$/

内容的提问来源于stack exchange，提问作者Huy Dinh Ngoc Quang