Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как реализовать ввод в input по маске? (https://javascript.ru/forum/dom-window/83375-kak-realizovat-vvod-v-input-po-maske.html)

dc65k 25.11.2021 16:04

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

рони 25.11.2021 17:33

dc65k,
https://javascript.ru/forum/dom-wind...-jquery-9.html

dc65k 26.11.2021 14:11

Спасибо.


Часовой пояс GMT +3, время: 23:44.