知识点：
拖拽
DataTransfer
拖拽献祭中的黑山羊-DataTransfer对象
MDN-DataTransfer
| 事件 | 事件 | 事件 | 事件 |
|---|---|---|---|
| dragstart | 拖拽开始 | dragend | 拖拽结束 |
| dragenter | 拖拽进入 | dragleave | 拖拽离开 |
| drop | 拖拽释放 | dragover | 拖拽经过 |
复制粘贴
ClipboardEvent.clipboardData
利用剪切板JS API优化输入框的粘贴体验
MDN-ClipboardEvent/clipboardData
表单行为
小测题目-dom41
html如下
<p>132-0803-3621（短横线需要过滤）</p>
<p>132-0803-3621@qq.com（短横线不能过滤）</p>
<form id="form">
<input id="input" placeholder="邮箱或密码">
</form>
我的答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM基础测试41</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@_nu/html-validator" />
</head>
<body>
<p>132-0803-3621（短横线需要过滤）</p>
<p>132-0803-3621@qq.com（短横线不能过滤）</p>
<form id="form">
<input id="input" placeholder="邮箱或密码">
</form>
<script type="text/javascript">
function telTrim(str) {
var tel = str.replace(/\-/g, '');
if(/^\d{11}$/.test(tel)) {
str = tel;
}
return str;
}
var mForm = document.querySelector("#form");
var mIpt = document.querySelector("#input");
// 拖拽
mIpt.addEventListener("drop", function(event) {
event.preventDefault();
mIpt.value = telTrim(event.dataTransfer.getData('text'));
})
// 复制粘贴
mIpt.addEventListener("paste", function(event) {
event.preventDefault();
var txt = event.clipboardData.getData('text') || window.clipboardData.getData('text');
mIpt.value = telTrim(txt);
})
//
mForm.addEventListener('submit', function(event) {
event.preventDefault();
mIpt.value = telTrim(mIpt.value);
})
</script>
</body>
</html>
网友评论