Form 表单中，在黏贴（Paste）前，如何对剪贴板内容先进行格式化处理？

Question

Form 表单中，在某输入框黏贴（Paste）内容的时候，需要先对剪贴板内容进行格式化或者其他一些处理，比如去除多余的空格、替换换行为空格、小写字母转大写等，然后再将内容放入表单。

Answer 1

这个问题，简单的解法我觉得有这么两种方式：

1. 给元素绑定onPaste事件：弊端为难以追加黏贴，如果要实现追加黏贴，需要读取光标位置、结合getSelection等，比较麻烦；

onPaste: (e) => {
  // 阻止默认事件
  e.preventDefault();
  form.setFieldsValue({
    // 获取剪贴板内容并格式化（如处理掉多余的空格、替换换行符等），然后设置给表单
    phone_number: e.clipboardData.getData('text').replace(/\s+/g, ' '),
  });
};

2. 结合 onPaste 和 onChange 实现

onPaste: () => {
  // 加锁，避免无意义的form.setFieldsValue
  IsOnPaste.current = true;
},
onChange: () => {
  if (IsOnPaste.current) {// 只有是黏贴引起的Change才需要格式化
    // 解锁
    IsOnPaste.current = false;
    form.setFieldsValue({
      // 获取表单的值，处理后再设置回去
      phone_number:form.getFieldValue('phone_number').replace(/\s+/g, ' ')
    })
  }
}