下拉框联动输入框问题排查：固定金额/百分比格式异常

需求说明 #

• 选择「Fixed Value（固定值）」时：输入框支持最多20位数字，显示印度卢比符号₹，自动添加千位分隔符
• 选择「Percentage（百分比）」时：输入框仅支持2位数字，自动添加百分号%，无需手动触发格式化

现有问题 #

1. 页面加载默认选中Fixed Value，但输入框的卢比符号和格式化功能不生效
2. 切换下拉选项时输入框值未自动重置，且切换到百分比后无法修改输入值

修复后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Input Field</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 统一处理输入框格式化逻辑
            function setupInputFormat(type) {
                // 先解绑之前的input事件，避免重复绑定导致的输入异常
                $('#inputField').off('input');
                // 切换选项时清空输入框
                $('#inputField').val('');
                
                if (type === 'fixed') {
                    $('#inputField').attr('maxlength', '20');
                    $('#inputField').on('input', function() {
                        // 提取输入中的纯数字
                        var pureNum = $(this).val().replace(/\D/g, '');
                        // 仅当有数字时添加卢比符号和千位分隔符
                        var formattedValue = pureNum ? '₹' + pureNum.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') : '';
                        $(this).val(formattedValue);
                    });
                } else if (type === 'percentage') {
                    $('#inputField').attr('maxlength', '2');
                    $('#inputField').on('input', function() {
                        // 提取纯数字并限制长度为2位
                        var pureNum = $(this).val().replace(/\D/g, '').slice(0,2);
                        var formattedValue = pureNum ? pureNum + '%' : '';
                        $(this).val(formattedValue);
                    });
                }
            }

            // 页面初始化时执行默认选项的格式化逻辑
            setupInputFormat($('#dropdown').val());

            // 下拉选项切换时重新配置输入框
            $('#dropdown').change(function() {
                setupInputFormat($(this).val());
            });
        });
    </script>
</head>
<body>
    <select id="dropdown">
        <option value="fixed">Fixed Value</option>
        <option value="percentage">Percentage</option>
    </select>
    <input type="text" id="inputField">
</body>
</html>

关键修复点 #

• 初始化触发：页面加载时直接调用格式化函数，解决默认选项无效果的问题
• 事件解绑：每次切换选项前解绑旧的input事件，避免多次绑定导致的输入异常（比如百分比模式下无法修改的问题）
• 输入框重置：切换选项时清空输入框，避免残留旧格式内容干扰新输入
• 格式化逻辑优化：
  • 固定值模式：仅在有数字输入时显示卢比符号，避免空输入时出现单独符号
  • 百分比模式：强制限制纯数字长度为2位，确保符合输入要求

内容的提问来源于stack exchange，提问作者AIYUB KHAN