输入框日文全角数字转半角重复显示问题求助

问题原因 #

你遇到的00重复显示问题，本质是oninput事件的重复触发：用户输入全角数字时触发第一次oninput，函数将值转为半角并设置输入框value，而设置value的操作会再次触发oninput事件，导致函数执行第二次。第二次执行时，虽然输入值已经是半角，但重复的赋值操作最终导致输入框出现重复字符。

解决方案 #

方案1：仅在值变化时更新输入框 #

修改函数逻辑，只有当转换后的值与输入框当前值不同时才执行赋值，避免无意义的重复触发：

<input type="text" id="inputField" oninput="convertToHalfWidth(this)">
<script>
    function convertToHalfWidth(inputElement) {
        const inputValue = inputElement.value;
        const fullToHalfMap = {
            '０': '0', '１': '1', '２': '2', '３': '3', '４': '4', 
            '５': '5', '６': '6', '７': '7', '８': '8', '９': '9'
        };

        const convertedValue = inputValue.replace(/[０-９]/g, match => fullToHalfMap[match]);

        // 仅当转换后的值与当前值不同时更新
        if (convertedValue !== inputElement.value) {
            inputElement.value = convertedValue;
        }
    }
</script>

方案2：用beforeinput从根源避免重复触发 #

beforeinput事件在内容插入输入框前触发，此时修改值不会再次触发事件，还能保留光标位置，体验更好：

<input type="text" id="inputField" onbeforeinput="convertToHalfWidth(event)">
<script>
    function convertToHalfWidth(event) {
        const inputText = event.data;
        if (!inputText) return;

        const fullToHalfMap = {
            '０': '0', '１': '1', '２': '2', '３': '3', '４': '4', 
            '５': '5', '６': '6', '７': '7', '８': '8', '９': '9'
        };

        const convertedText = inputText.replace(/[０-９]/g, match => fullToHalfMap[match]);

        // 阻止默认输入，手动插入转换后的文本
        event.preventDefault();
        const inputEl = event.target;
        const start = inputEl.selectionStart;
        const end = inputEl.selectionEnd;
        
        // 拼接文本并恢复光标位置
        inputEl.value = inputEl.value.slice(0, start) + convertedText + inputEl.value.slice(end);
        inputEl.selectionStart = inputEl.selectionEnd = start + convertedText.length;
    }
</script>

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