Как реализовать ввод в input по маске?
Всем привет. Как в примере ниже в методе onInputText при вводе данных отображать вводимое (скопированное) значение по маске? В данном случае yyyy mm dd.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="root">
<div>
<form action="" class="form">
<input type="text" placeholder="yyyy mm dd" class="text"/>
</form>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
class Solution {
constructor(form, text) {
this.text = text;
this.text.addEventListener("input", this.onInputText, false);
}
onInputText = (event) => {
// Регулярное выражение формата даты
// [url]https://webformyself.com/regulyarnoe-vyrazhenie-formata-daty/[/url]
// let regexp = /\d{4}(-|\/)\d{2}\1\d{2}/g;
/*
2016-07-21
2016 07 21
2016/07/21
2016-07/21
*/
// let regexp = /\d{4}(-)\d{2}(-)\d{2}/g; // 2016-07-21
let regexp = /\d{4}(\s)\d{2}(\s)\d{2}/g; // 2016 07 21
console.log(event.target.value.match(regexp));
// event.target.value = event.target.value.match(regexp) && event.target.value.match(regexp).join('');
}
}
new Solution(
document.querySelector(".form"),
document.querySelector(".text"),
)
|