DOM基础测试41：手机号码输入体验优化

[wingmeng]

题目：

图片暂缺

我的回答：

> 在线 Demo <

第 1 题

function telTrim(str) {
  str = String(str);
  const s = str.replace(/[\s-]/g, '');
  return /^\d{11}$/.test(s) ? s : str;
}

第 2 题

const formElm = document.getElementById('form');
const inputElm = document.getElementById('input');

// 或者
const formElm = document.forms['form'];
const inputElm = formElm['input'];

第 3 题

inputElm.addEventListener('drop', function(e) {
  e.preventDefault();
  this.value = telTrim(e.dataTransfer.getData('text'));
});

第 4 题

inputElm.addEventListener('paste', function(e) {
  e.preventDefault();
  const { selectionStart: start, selectionEnd: end } = this;  // 文本框光标位置
  const text = e.clipboardData.getData('text');

  this.setRangeText(text, start, end);  // 从当前光标位置追加粘贴的内容
  this.value = telTrim(this.value);  // 格式化文本框内容
});

第 5 题

formElm.addEventListener('submit', function(e) {
  e.preventDefault();
  inputElm.value = telTrim(inputElm.value);

  // 后续提交表单的操作... 如 ajax 或 this.submit();
});