VOICEVOX项目中全角数字输入处理的技术实现方案

背景介绍

在VOICEVOX语音合成软件的开发过程中，用户反馈了一个关于输入框数字处理的问题。目前软件中的音高(Pitch)等数值输入框仅支持半角数字输入，这给习惯使用全角数字输入的用户带来了不便。本文将探讨如何优雅地实现输入框对全角数字的支持。

问题分析

当前系统存在以下主要问题点：

1. 输入框无法自动识别全角数字字符（如"０"-"９"）
2. 用户需要手动在全角和半角数字间切换，影响输入效率
3. 小数点处理也不统一，全角句号"。"无法作为小数点识别

技术解决方案

核心思路

通过前端输入处理层实现全角到半角的自动转换，主要技术点包括：

1. 字符转换机制：建立全角数字与半角数字的映射关系
2. 输入事件处理：在QInput组件的model-value更新时进行转换
3. 数值解析：确保转换后的字符串能被正确解析为数值

具体实现方案

1. 全角数字转换函数：

function convertZenToHan(str) {
  const zenkaku = "０１２３４５６７８９．";
  const hankaku = "0123456789.";
  return str.split('').map(c => {
    const index = zenkaku.indexOf(c);
    return index >= 0 ? hankaku[index] : c;
  }).join('');
}

2. 输入框事件处理：

<q-input 
  :model-value="value"
  @update:model-value="(val) => $emit('update:model-value', convertZenToHan(val))"
/>

3. 数值解析增强：

function parseNumber(str) {
  const converted = convertZenToHan(str);
  return parseFloat(converted);
}

技术优势

1. 用户体验提升：用户无需切换输入法状态，提高输入效率
2. 兼容性保障：同时支持全角和半角输入，不影响现有功能
3. 扩展性强：可轻松添加对其他全角符号的支持

实现注意事项

1. 性能考量：转换操作应仅在输入时触发，避免不必要的计算
2. 输入验证：转换后仍需进行数值有效性检查
3. 国际化支持：考虑不同地区数字格式的差异

总结

通过在VOICEVOX中实现全角数字输入支持，显著提升了软件的易用性。这种前端输入处理模式不仅适用于数字输入，也可推广到其他需要特殊字符处理的输入场景中，为用户提供更加流畅自然的输入体验。