DOM基础测试41 - 手机号格式化

[JaimeCheng]

题目： 原issue

回答：

// 我的回答 6分
// 1
function telTrim (str) {
  return str.match(/[0-9]/g).length === 11 && str.replace(/[-\s]/g, '').length === 11 && str.replace(/[-\s]/g, '') || str
}

// 2
const myForm = document.getElementById('form')
const myInput = document.getElementById('input')

// 3
myInput.addEventListener('drop', e => {
  setTimeout(() => {
    myInput.value = telTrim(e.target.value)
  }, 0)
})

// 4
myInput.addEventListener('paste', e => {
  setTimeout(() => {
    myInput.value = telTrim(e.target.value)
  }, 0)
})

// 5
myForm.addEventListener('submit', e => {
  e.preventDefault()
  myInput.value = telTrim(myInput.value)
})

满分回答 | 优秀回答 | 高分回答 | 优秀回答

总结：

1. 定时器体验不好，页面会有闪烁；
2. 要考虑复制之前输入框是否有内容；
3. 插值：拖拽或复制前就处理好内容；
4. 相关文章

> 在线demo <

[JaimeCheng]

zxx: 本期要点

1. dataTransfer.getData替换是没问题的，但是需要判断，字符为空，有值的时候不应该直接替换（例如livetune的实现）。
2. 插值的处理，拖进来的东西，直接就是替换好的，同时又不会替换之前的值。1. 有人通过获取框选位置，进行替换拼接。2. 是使用document.execCommand插入（ylfeng250粘贴那里）。3. 我认为比较好的实现，直接改变拖拽数据或者粘贴数据，在'dragstart'事件中（dataTransfer.setData以及clipboardData.setData）。
3. 有人使用了定时器，但是体验并不好，会闪一下。
4. 还有一种更容易理解的简单方法，也是看了大家的回答才知道一个新特性，InputEvent.inputType，值包括insertText, deleteContentBackward, insertFromPaste, insertFromDrop以及 formatBold。但是IE并不支持，慎用。可参考ziven27实现。
5. 最后一题，先preventDefault，再过滤，再提交。在表单提交中，写在最后的return true是没有意义的。
6. event.clipboardData || window.clipboardData是比较好的书写，可以兼容IE浏览器。