@dc65k

Как реализовать ввод в 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) => {

        // Регулярное выражение формата даты
        // https://webformyself.com/regulyarnoe-vyrazhenie-formata-daty/
        // 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"),
)
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ответы на вопрос 1
@hasalex
разработчик
Либо используйте pattern

<input .....     pattern="..регулярное выражение..." />

только по кроссбраузерности проверьте, подходит ли вам
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы