DOM基础测试41 - Githubissues

zhangxinxu commented 4 years ago

本期小测关于手机号优化的事件处理。

积分：2+1+2+2+2

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式（缩进和代码高亮1积分），本期小测需要提供demo，没有demo会扣1积分。

```js
// 你的JS代码写在这里
 ```

其他本周六正常答疑，12月14日上午10:00，直播地址：https://live.bilibili.com/21193211

每位答题者会有至少2积分参与分，本次小测满分11积分。

首位答题者将会获得100%被翻牌的技能。

XboxYan commented 4 years ago

demo

function telTrim(str){
    var tel = str.replace(/[\s-]/g, '');
    if (/^\d{11}$/.test(tel)) {
        return tel;
    }
    return str;
}

var form = document.getElementById('form');
var input = document.getElementById('input');

input.addEventListener('drop',function(ev){
    ev.preventDefault();
    var text = ev.dataTransfer.getData('text');
    this.value = telTrim(text);
})

input.addEventListener('paste',function(ev){
    ev.preventDefault();
    var text = ev.clipboardData.getData('text');
    this.value = telTrim(text);
})

form.addEventListener('submit',function(ev){
    ev.preventDefault();
    input.value = telTrim(input.value);
})

liyongleihf2006 commented 4 years ago

jsbin

<p>132-0803-3621（短横线需要过滤）</p>
<p>132 0803 3621（短横线需要过滤）</p>
<p>132-0803-3621@qq.com（短横线不能过滤）</p>
<form id="form">
    <input value="132 0803 3621" name="tel" id="input" placeholder="邮箱或密码" />
    <input type="submit"/>
</form>

//1
function telTrim(tel) {
    tel2 = tel.replace(/-|\s/g, '')
    if (/^\d{11}$/.test(tel2)) {
        return tel2;
    }
    return tel;
}
console.log(telTrim('132-0803-3621'));
console.log(telTrim('132 0803 3621'));
console.log(telTrim('132-0803-3621@qq.com'));
//2
var form = document.querySelector("#form");
var input = document.querySelector("#input");
console.log(form);
console.log(input);
//3
var dragText = '';
window.addEventListener("dragstart", function (event) {

    //copy from https://www.zhangxinxu.com/study/201104/get-selection-text.html
    var userSelection, text;
    if (window.getSelection) {
        //现代浏览器
        userSelection = window.getSelection();
    } else if (document.selection) {
        //IE浏览器 考虑到Opera，应该放在后面
        userSelection = document.selection.createRange();
    }
    if (!(text = userSelection.text)) {
        text = userSelection;
    }
    dragText = text.toString();
});
input.addEventListener("drop", function (event) {
    event.preventDefault();
    this.value = telTrim(dragText);
});
//4
input.addEventListener('paste', function (event) {
    event.preventDefault();
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    this.value = telTrim(paste);
});
//5
form.addEventListener('submit',function(event){
    event.preventDefault();
    input.value = telTrim(input.value);
})

ylfeng250 commented 4 years ago

demo

// 2
var form = document.getElementById("form");
var input = document.getElementById("input");
//   1
function telTrim(tel) {
  // 先先判断是否有可能是手机号
  if (/\d{11}/.test(tel) || !!tel.match(/[^\d\-\s]/)) {
    return tel;
  } //else {
    return tel.replace(/-|\s/g, "").trim();
 // }
}
//   3
input.addEventListener("drop", function(e) {
  // 默认输入框为空
  e.preventDefault();
  var text = e.dataTransfer.getData("text");
  // 改变输入框的值
  input.value = telTrim(text);
});
//获取剪贴板数据方法
function getClipboardText(event) {
  var clipboardData = event.clipboardData || window.clipboardData;
  return clipboardData.getData("text");
}
// 4
input.addEventListener("paste", function(e) {
  e.preventDefault();
  // 默认原始输入框为空
  var txt = getClipboardText(e);
  // console.log(txt);
  var newTxt = telTrim(txt);
  document.execCommand("insertText", false, newTxt);
});
//   5
form.addEventListener("submit", function(e) {
  e.preventDefault();
  var tel = input.value;
  var tmp = tel.match(/\d/g);
  // 符合手机格式 直接提交
  if (tmp && tel.length === 11) {
    form.submit();
    return true;
  }
  // 不符合的修改为符合的格式
  input.value = telTrim(tel);
  return false;
});

ziven27 commented 4 years ago

JSBIN: 点我

// 第一题
function telTrim(numTel){
    if(!numTel){
        return '';
    }
    var strNoSpace = numTel.split(' ').join('');
    var strNoLine = strNoSpace.split('-').join('');
    if(strNoLine.length === 11){
        return strNoLine;
    }
    return strNoSpace;
};
console.log(telTrim('132- 0803-3621 '), telTrim('132-0803-3621@qq.com'));

// 第二题
var eleForm=document.getElementById('form');
var eleInput=document.getElementById('input');
console.log({eleForm, eleInput});

// 第三题
eleInput.addEventListener('input', function(e){
    if(e.inputType=="insertFromDrop"){
        e.target.value = telTrim(e.target.value);
    }
});

// 第四题
eleInput.addEventListener('input', function(e){
    if(e.inputType=="insertFromPaste"){
        e.target.value = telTrim(e.target.value);
    }
});

// 第五题
eleForm.addEventListener('submit',function(e){
    e.preventDefault(); // 为了效果暂时阻止提交
    eleInput.value = telTrim(eleInput.value);
});

zy017 commented 4 years ago

demo

// 1.
function telTrim(s) {
  var s1 = s.replace(/[\s-]/g, '')
  return /^[0-9]{11}$/.test(s1) && s1 || s
}
console.log(telTrim('132-0803-3621'), telTrim('132-0803-3621@qq.com'))
// 2.
var form = document.getElementById('form')
var input = document.getElementById('input')
// 3.
input.addEventListener('drop', e => {
  e.preventDefault()
  var text = e.dataTransfer.getData('text')
  e.target.value = telTrim(text)
  e.target.select()
})
// 4.
input.addEventListener('paste', e => {
  e.preventDefault()
  var text = e.clipboardData.getData('text')
  e.target.value = telTrim(text)
  e.target.select()
})
// 5.
form.addEventListener('submit', e => {
  e.preventDefault()
  input.value = telTrim(input.value)
})

les-lee commented 4 years ago

   // 1
    function telTrim(val) {
      if (val.includes('@')) {
        return val
      }
      return val.match(/\d/g).length == 11 ? val.replace(/\s|-/g, '') : val
    }

    // 2
    let form = document.querySelector('#form');
    let input = document.querySelector('#input');

    // 3
    input.addEventListener('drop', function (event) {
      event.preventDefault()
      this.value = telTrim(event.dataTransfer.getData('text/plain'))
    })
    // 4
    input.addEventListener('paste', function (event) {
      event.preventDefault()
      this.value = telTrim(event.clipboardData.getData('text/plain'))
    })
    // 5
    form.addEventListener('submit', function (event) {
      event.preventDefault()
      input.value = telTrim(input.value)
    })

JaimeCheng commented 4 years ago

demo

// 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)
})

Seasonley commented 4 years ago

demo

function telTrim(strTel){
  var temp=strTel.replace(/-|\s/g,'');
  return /^\d{11}$/.test(temp)?temp:strTel.trim();
}
let [$form,$input]=['form','input'].map(v=>document.getElementById(v));
$input.addEventListener('drop',function(event){
    event.preventDefault();
    this.value = telTrim(event.dataTransfer.getData('text'));
});
$input.addEventListener('paste',function(event) {
  event.preventDefault();
  this.value = telTrim(event.clipboardData.getData('text'));
});
$form.addEventListener('submit',function(event){
  event.preventDefault();
  $input.value = telTrim($input.value);
})

NeilChen4698 commented 4 years ago

Demo https://codepen.io/crazyboy/pen/WNbwWGY 1.

var telTrim = function(val) {
    return !val ? '' : (val.match(/^1([ -]?[0-9]){10}$/) ? val.replace(/[ -]/g,'') : val);
}

2.

document.querySelector('form#form');
document.querySelector('input#input');

3/4.

document.querySelector('input#input').oninput = function(e) {
    e.target.value = telTrim(e.target.value);
}

5.

document.querySelector('form#form').onsubmit = function(e) {
    e.target['input'].value = telTrim(e.target['input'].value);
}

livetune commented 4 years ago

DEMO 感觉输入框里有字的时候，应该不对被复制的字符串做处理

// 第一题
function telTeim(tel) {
    const isAllNum = /^[\d\-\s]+$/.test(tel)
    const trimTel = tel.trim().replace(/[\s\-]/g, '')
    return isAllNum && trimTel.length === 11 ? trimTel : tel
}
console.log(telTeim('132-0803-3621'))
console.log(telTeim('132-0803-3621@qq.com'))
// 第二题
const form = document.getElementById('form')
const input = document.getElementById('input')
// 第三题
input.addEventListener('drop', event => {
    if (event.target.value.length === 0) {
        event.preventDefault()
        const text = event.dataTransfer.getData("text")
        event.target.value = telTeim(text)
    }
})
// 第四题
input.addEventListener('paste', event => {
    const { value, selectionStart, selectionEnd } = event.target
    if (value.length === 0 || selectionEnd - selectionStart) {
        event.preventDefault()
        let paste = (event.clipboardData || window.clipboardData).getData('text');
        event.target.value = telTeim(paste)
    }
})
// 第五题
form.addEventListener('submit', event => {
    event.preventDefault()
    input.value = telTeim(input.value)
    form.submit()
})

wind1996 commented 4 years ago

demo jsbin

// 1. 格式化手机号
    function trimTel(str) {
        if (!str) {
            return str
        }
        const hasTrim = str.replace(/[\s-]/g, '');
        return (/^\d{11}$/).test(hasTrim) ? hasTrim : str
    }

    console.error(trimTel('138-0013-8000'));
    console.error(trimTel('138 0013 8000'));
    console.error(trimTel('138 0013 8000@qq.com'));

    // 2. 获取id是form的表单元素，和id是input的输入框元素
    // 方法1
    console.log(document.getElementById('form'));
    console.log(document.getElementById('input'));

    // 方法2
    console.log(document.querySelector('#form'));
    console.log(document.querySelector('#input'));

    // 方法3
    console.log(document.forms['form']);
    console.log(document.forms['form']['input']);

    const input = document.querySelector('#input');
    const form = document.querySelector('#form');

    //3. 拖拽格式化手机号
    input.addEventListener('drop', function (e) {
        e.preventDefault();
        this.value = trimTel(e.dataTransfer.getData('text'));
    });

    // 4. 粘贴格式化
    input.addEventListener('paste', function (e) {
        e.preventDefault();
        this.value = trimTel(e.clipboardData.getData('text'));
    });

    // 5. 提交前格式化
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        input.value = trimTel(input.value);
        this.submit()
    })

Despair-lj commented 4 years ago

demo

// 1
function telTrim(str = '') {
  str = str.trim();
  var tel = str.replace(/\s|-/g, '');
  if (/^\d{11}$/.test(tel)) {
    return tel;
  }
  return str;
}

// 2
var form = document.getElementById('form');
var input = document.getElementById('input');

// 3
input.addEventListener('drop', function(event) {
  var dropText = event.dataTransfer.getData('text');
  this.value = telTrim(dropText);
  this.focus();
  this.setSelectionRange(0, this.value.length);
  event.preventDefault();
});

// 4
input.addEventListener('paste', function(event) {
  var pasteText = (event.clipboardData || window.clipboardData).getData('text');
  var selectionStart = 0;
  var selectionEnd = 0;
  // 如果输入框中是全选状态或没有文本即对粘贴文档进行处理
  if (this.selectionEnd - this.selectionStart === this.value.length) {
    var dealText = telTrim(pasteText);
    this.value = dealText;
    selectionEnd = dealText.length;
  } else {
    // 否则就只对选中区域进行替换操作
    selectionStart = this.selectionStart;
    selectionEnd = selectionStart + pasteText.length;
    this.value =
      this.value.slice(0, this.selectionStart) +
      pasteText +
      this.value.slice(this.selectionEnd);
  }

  this.setSelectionRange(selectionStart, selectionEnd);
  event.preventDefault();
});

// 5
form.addEventListener('submit', function(event) {
  input.value = telTrim(input.value);
})

xxf1996 commented 4 years ago

demo

// 第一题
function telTrim (tel) {
  let num = tel.replace(/[\s-]/g, '')
  return (num.replace(/[\D]/g, '') === num && num.length === 11) ? num : tel
}

// 过滤用户的输入，返回正确的手机号或邮箱
function filterInput (userInput) {
  userInput = userInput.trim()
  return telTrim(userInput)
}

// 第二题
let form = document.forms.form
let input = document.getElementById('input')

// 第三题
input.addEventListener('drop', e => {
  e.preventDefault()
  let text = e.dataTransfer.getData('text') // 获取拖拽文本
  input.value = filterInput(text)
})

// 第四题
input.addEventListener('paste', e => {
  e.preventDefault()
  let text = e.clipboardData.getData('text') // 获取复制文本
  input.value = filterInput(text)
})

// 第五题
form.addEventListener('submit', e => {
  input.value = filterInput(input.value)
})

guqianfeng commented 4 years ago

demo

        {
            function telTrim(str) {
                str = str.replace(/\s|-/g, "");
                if (/^1\d{10}$/.test(str)) {
                    return str;
                }
                return str;
            }

            let oForm = document.querySelector("#form")
            let oInput = document.querySelector("#input")

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

            oInput.addEventListener("paste", function(e){
                e.preventDefault();
                this.value = telTrim(e.clipboardData.getData("text"));
            })

            oForm.addEventListener("submit", e => {
                e.preventDefault
                oInput.value = telTrim(oInput.value);
            })
        }

LYN-alan commented 4 years ago

demo

<p>132-0803-3621</p>
<p>132-0803-3621@qq.com</p>
<form id="form">
    <input id="input" placeholder="邮箱或密码">
    <input type="submit" value="提交">
</form>

// 第一题
function telTrim (str) {
    let tel = str.replace(/[-\s]/g, '');
    if (/^[0-9]{11}$/g.test(tel)) {
        return tel;
    }
    return str;
}
// 第二题
let form = document.getElementById('form');
let input = document.getElementById('input');

// 第三题
input.addEventListener('drop',function(e){
    let ev = e || window.event;
    if (ev && ev.preventDefault) {
        ev.preventDefault();
    } else {
        ev.returnValue = false;
    }
    let userSelection = '';
    if (window.getSelection) { //一般浏览器
        userSelection = window.getSelection();
    } else if (document.selection) { //IE浏览器、Opera
        userSelection = document.selection.createRange();
    }
    userSelection.toString();
    this.value = telTrim(userSelection.toString());
},false);
// 第四题
input.addEventListener('paste',function(e){
    let ev = e || window.event;
    let clipboardData = e.clipboardData || window.clipboardData;
    let paste = clipboardData.getData('text');
    if (ev && ev.preventDefault) {
        ev.preventDefault();
    } else {
        ev.returnValue = false;
    }
    this.value = telTrim(paste);
    console.log(2)
},false);
// 第五题
form.addEventListener('submit',function(ev){
    ev.preventDefault(); // 暂时组织提交刷新，为了看input的值有没有变化
    input.value = telTrim(input.value);
    return true;
},false)

juzhiqiang commented 4 years ago

测试demo

var reg = {
  tel: /^\d{11}$/,
  email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
}

// 验证是否式正确邮箱/手机格式
function emailAndMob(str){
  return reg.tel.test(str) || reg.email.test(str) ; 
}

// 第一题
function telTrim(mob){
  let phone = mob.replace(/\s|-/g,'');
  return reg.tel.test(phone) ? phone : mob ;
}

console.log(telTrim('132-0803-3162'))
console.log(telTrim('132-0803-3621@qq.com'));

// 第二题
let forms = document.querySelector('#form'),
    inputs = document.querySelector('#input');

// 这里偷懒以下错误均直接清空  实际应提示错误
// 第三题
inputs.ondrop = function(e){
    let val = telTrim(e.dataTransfer.getData('text'));
    this.value = emailAndMob(val) ? val : '';
    return false; //阻止默认事件
}

// 第四题 
inputs.onchange= function(e){
  let val = telTrim(this.value);
  this.value = emailAndMob(val) ? val : '';
}

// 第五题 回车提交
forms.onsubmit = function(e){
  let isTrue = emailAndMob(inputs.value);
   inputs.value = isTrue ? telTrim(inputs.value) : '';
  return  isTrue;
}

wingmeng commented 4 years ago

> 在线 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();
});

HaveYuan commented 4 years ago

        //第1题
        function telTrim(str) {
            console.log(str)
            if(!str) return ;
            let newStr = str.replace(/\s|-/g,''),
                reg = /^[0-9]+.?[0-9]*$/;

            if(newStr.toString().length == 11 && reg.test(newStr)) {
                return newStr;
            }else {
                return str;
            }
        }
        //console.log(telTrim('132-8083-3621@qq.com'))

        //第2题
        let form = document.getElementById("form");
        let input = document.getElementById("input");

        //第3题
        input.addEventListener('input', _ => {
            if(input.value != '') {
                input.value = telTrim(input.value)
            }
        })

        //第4题
        function fun() {
            if(input.value != '') {
                input.value = telTrim(input.value)
            }
        }

        //第5题
        input.addEventListener('blur', _ => {
            if(input.value != '') {
                input.value = telTrim(input.value)
            }
        })

rayj1993 commented 4 years ago

demo

// 第一题
function telTrim(str) {
    if (str.indexOf('@') === -1) {
        return str.replace(/\D/g, '')
    } else {
        return str
    }
}
console.log(telTrim('132-0803-3621@qq.com'))
console.log(telTrim('132-0803-3621'))
// 第二题
let formX = document.querySelector('#form')
let inputX = document.querySelector('#input')

// 第三题
inputX.addEventListener('input', function (e) {
    if (e.inputType == "insertFromDrop") {
        e.target.value = telTrim(e.target.value);
    }
});

// 第四题
inputX.addEventListener('input', function (e) {
    if (e.inputType == "insertFromPaste") {
        e.target.value = telTrim(e.target.value);
    }
});

// 第五题
formX.addEventListener('submit', function (e) {
    e.preventDefault()
    inputX.value = telTrim(inputX.value);
});

zengqingxiao commented 4 years ago

demo // 第一

    function trlTrim(str) {
      return str.match(/[\d\s-]+/g)[0] === str && str.replace(/\D/g, '').length === 11 ? str.replace(/[\s-]+/g, '') : str
    }

// 第二

    var formDom = document.getElementById('form');
    var inputDom = document.getElementById('input');

// 第三

    let pitchOnEle // 拖拽元素
    var PDomAll = document.querySelectorAll('p');
    PDomAll.forEach(item => {
      // 当拖动元素或选中的文本到一个可释放目标时触发
      item.addEventListener('dragstart', (ev) => {
        pitchOnEle = item
        item.parentNode.classList.add('pitch-on')
      })
      // 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键).
      item.addEventListener('dragend', (ev) => {
        item.parentNode.classList.remove('pitch-on')
      })
    })
    // 当元素或选中的文本在可释放目标上被释放时触发
    inputDom.addEventListener('dragover', (ev) => {
      ev.target.placeholder = pitchOnEle.innerHTML
      event.preventDefault(); // 阻止默认的点击事件执行
    })
    // 当元素或选中的文本在可释放目标上被释放时触发
    inputDom.addEventListener('drop', (ev) => {
      ev.target.value = trlTrim(pitchOnEle.innerHTML)
      event.preventDefault(); // 阻止默认的点击事件执行
    })

// 4

    inputDom.addEventListener('paste', (ev) => {
      let paste = (ev.clipboardData || window.clipboardData).getData('text');
      paste = trlTrim(paste);
      const selection = window.getSelection();
      if (!selection.rangeCount) return false;
      selection.deleteFromDocument(); // 删除文本
      inputDom.value = paste
      ev.preventDefault()
    })

// 5

    inputDom.addEventListener('blur', (ev) => {
      ev.target.value = ev.target.value && trlTrim(ev.target.value)
    })

lifelikejuly commented 4 years ago

Demo

第一题

function telTrim(strTel) {
    temp = strTel.replace(/\s|-/g, "");
    if (/^\d{11}$/.test(temp)) {
        return temp;
    }
    return strTel;
}

第二题

var form = document.getElementById('form');
var input = document.getElementById('input');

第三题

input.addEventListener("drop", function(e) {
    e.preventDefault();
    input.value = telTrim(e.dataTransfer.getData("text"));
});

第四题

input.addEventListener("paste", function(e) {
    e.preventDefault();
    input.value = telTrim(e.clipboardData.getData("text"));
});

第五题


form.addEventListener('submit', function(ev) {
    ev.preventDefault();
    input.value = telTrim(input.value);
})

GCGligoudan commented 4 years ago

demo

// 1.
const telTrim = (str) => {
  newStr = str.split(' ').join('');
  newStr = newStr.split('-').join('');
  if (/^1\d{10}$/.test(newStr)) return newStr;
  return str;
}
console.log(telTrim('132-0803-3621'))
console.log(telTrim('132-0803-3621@qq.com'))
// 2.
const formEle = document.querySelector('#form');
const inputEle = document.querySelector('#input');
// 3.
inputEle.addEventListener('drop',function(e){
  e.preventDefault();
  const str = e.dataTransfer.getData('text');
  this.value = telTrim(str);
}, false)

// 4.
inputEle.addEventListener('paste',function(e){
  e.preventDefault();
  const str = (e.clipboardData || window.clipboardData).getData('text');
  this.value = telTrim(str);
}, false)

// 5.
formEle.addEventListener('submit', function(e){
  e.preventDefault()
  const value = inputEle.value;
  inputEle.value = telTrim(value);
}, false)

sghweb commented 4 years ago

demo

// 第一题
function telTrim(str) {
  let reg1 = /[\.-\s]*/g
  if (str.replace(reg1, "").length == 11) {
    return str.replace(reg1, "")
  } else {
    return str
  }
}
// 第二题
let formEle = document.getElementById("form")
let inputEle = document.getElementById("input")

// 第三题
inputEle.addEventListener("drop", ev => {
  var data = ev.dataTransfer.getData("Text");
  console.log(data)
  inputEle.value = telTrim(data)
  ev.preventDefault();
})
dragEle.addEventListener('dragstart', ev => {
  console.log(ev)
  ev.dataTransfer.setData("Text", ev.target.innerText);
})

// 第四题
inputEle.addEventListener('paste', ev => {
  ev.preventDefault()
  inputEle.value = telTrim(ev.clipboardData.getData('text'))
})

// 第五题
formEle.addEventListener('submit', function(ev) {
  ev.preventDefault();
  inputEle.value = telTrim(inputEle.value);
})

asyncguo commented 4 years ago

// 第一题
function telTrim(str) {
  let strResult = str.replace(/[\s-]/g, '')
  return /^\d{11}$/g.test(strResult) ? strResult : str
}
// 第二题
let formEl = document.getElementById('form')
let inputEl = document.getElementById('input')
// 第三题
inputEl.addEventListener('drop', e => {
  e.preventDefault()
  inputEl.value = telTrim(e.dataTransfer.getData('text'))
})
// 第四题
document.addEventListener('paste', e => {
  e.preventDefault()
  inputEl.value = telTrim(e.clipboardData.getData('text'))
})
// 第五题
formEl.addEventListener('submit', e => {
  inputEl.value = telTrim(inputEl.value)
})

zhangxinxu commented 4 years ago

本期要点：

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

Despair-lj commented 4 years ago

经过我的测试, 在 submit 事件里面处理表单里面的数据, 会发送修改后的数据, 所以不用进行停止默认事件的操作

zhangxinxu commented 4 years ago

经过我的测试, 在 submit 事件里面处理表单里面的数据, 会发送修改后的数据, 所以不用进行停止默认事件的操作

好的，感谢反馈，我再看下。

zhangxinxu commented 4 years ago

经过我的测试, 在 submit 事件里面处理表单里面的数据, 会发送修改后的数据, 所以不用进行停止默认事件的操作

我测试了下，IE浏览器下并不是这样的，Firefox和Chrome符合你说的策略。

Despair-lj commented 4 years ago

我测试了下，IE浏览器下并不是这样的，Firefox和Chrome符合你说的策略。

我只在 FF/Chrome/Safari 上测试, 忘记测试 IE 了. 如果要兼容 IE, 应该对 preventDefault 事件作判断, 因为 IE 上不支持这个方法

form.addEventListener('submit', function(event) {
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
  input.value = telTrim(input.value);
  this.submit();
})

zhangxinxu / quiz

DOM基础测试41 #56

第 1 题

第 2 题

第 3 题

第 4 题

第 5 题