Angular中如何去除IP掩码输入框中的下划线字符？

我完全懂你现在的困扰——用Inputmask实现IP输入框后，没填完的位置会带着下划线_一起提交，比如输入到192.168.0.0就提交的话，会变成192.168.0.0__，之前尝试用正则处理还把整个内容弄空了，别提多闹心了。别慌，给你几个靠谱的解决方案：

方案一：用Inputmask原生配置（最推荐） #

Inputmask本身就有专门处理这个问题的配置项removeMaskOnSubmit，只需要把它设为true，就能在表单提交时自动移除掩码里的占位符（也就是那些下划线），完全不用手动写正则。

修改后的代码如下：

maskedInputs = { 
  init: function() { 
    $("#mask_ip").inputmask({ 
      mask: "i[i[i]].i[i[i]].i[i[i]].i[i[i]]", 
      definitions: { 
        'i': { 
          validator: function (chrs, buffer, pos, strict, opts) { 
            if (pos - 1 > -1 && buffer[pos - 1] != ".") { 
              chrs = buffer[pos - 1] + chrs; 
              if (pos - 2 > -1 && buffer[pos - 2] != ".") { 
                chrs = buffer[pos - 2] + chrs; 
              } else chrs = "0" + chrs; 
            } else chrs = "00" + chrs; 
            return new RegExp("25[0-5]|2[0-4][0-9]|[01][0-9][0-9]").test(chrs); 
          }, 
          cardinality: 1 
        } 
      },
      // 新增这行配置，提交时自动移除占位符下划线
      removeMaskOnSubmit: true
    }); 
  } 
};

这个选项会自动识别掩码里的占位符，只保留用户实际输入的有效IP片段，不会破坏原有内容，是最稳妥的方法。

方案二：手动在提交前清理值 #

如果因为Inputmask版本问题导致上面的配置不生效，那可以手动在表单提交时处理输入值，只需要移除所有下划线即可：

// 给表单绑定提交事件
$('form').submit(function() {
  const ipInput = $('#mask_ip');
  // 移除所有下划线
  const cleanIp = ipInput.val().replace(/_/g, '');
  // 将清理后的值重新赋值给输入框
  ipInput.val(cleanIp);
});

或者在获取提交值的时候直接处理：

// 获取并清理值
const submitIp = $('#mask_ip').val().replace(/_/g, '');
// 用submitIp参与提交逻辑

之前你用正则处理导致内容为空，大概率是正则表达式写错了，这个replace(/_/g, '')只会匹配并替换所有下划线，不会影响正常的IP内容。

方案三：修改占位符为空（备选） #

如果不想看到输入框里的下划线，也可以直接把占位符设为空字符串，这样输入框里不会显示下划线，提交自然也不会带了：

$("#mask_ip").inputmask({ 
  mask: "i[i[i]].i[i[i]].i[i[i]].i[i[i]]", 
  definitions: { /* 保持原有定义 */ },
  // 把占位符设为空
  placeholder: ''
});

不过这个方案会让用户看不到输入的位置提示，可能影响体验，所以只作为备选方案。

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