jQuery UI Spinner添加前缀报错求助：Uncaught TypeError

嘿，我碰到过类似的问题，这个错误的根源其实很简单——你在调用substring的时候，value可能是数字类型而不是字符串！jQuery UI Spinner内部会把值处理成数字，直接对数字用字符串方法肯定会报错。

下面给你一个完整的解决方案，同时支持前缀和后缀的自定义Spinner：

自定义支持前缀的Spinner Widget #

$(document).ready(function() {
  // 扩展Spinner，同时支持前缀和后缀
  $.widget('ui.prefix_suffix_spinner', $.ui.spinner, {
    options: {
      prefix: '', // 自定义前缀
      suffix: ''  // 自定义后缀
    },
    
    _format: function(value) {
      // 先把数字转成字符串，再拼接前缀和后缀
      var formatted = this.options.prefix + value.toString() + this.options.suffix;
      return formatted;
    },
    
    _parse: function(value) {
      // 先把输入值转成字符串，再移除前缀和后缀，最后转成数字
      var strValue = value.toString();
      // 移除前缀
      if (this.options.prefix && strValue.startsWith(this.options.prefix)) {
        strValue = strValue.substring(this.options.prefix.length);
      }
      // 移除后缀
      if (this.options.suffix && strValue.endsWith(this.options.suffix)) {
        strValue = strValue.substring(0, strValue.length - this.options.suffix.length);
      }
      // 转成数字返回，Spinner内部会处理验证
      return parseInt(strValue, 10) || 0;
    }
  });

  // 初始化带前缀的Spinner
  $('.spinner1').prefix_suffix_spinner({
    prefix: '$', // 示例前缀：美元符号
    suffix: '.00' // 示例后缀：两位小数
  });
});

关键修复点 #

• 类型转换：在_format和_parse方法里，首先把value转成字符串（value.toString()），避免直接对数字调用字符串方法。
• 前缀移除逻辑：在_parse里，先判断字符串是否以前缀开头，再用substring截取掉前缀，确保能正确解析成数字。
• 默认值处理：如果解析失败（比如用户输入了无效内容），返回0作为兜底，避免Spinner出现异常。

测试注意事项 #

• 确保你的HTML里的.spinner1输入框初始值是合法数字，比如<input class="spinner1" value="10">，这样初始化时不会出问题。
• 如果需要支持小数，可以把parseInt换成parseFloat，同时调整Spinner的step选项为0.01。

内容的提问来源于stack exchange，提问作者Harald Wirth