Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.11.2021, 17:04
Аспирант
Отправить личное сообщение для dc65k Посмотреть профиль Найти все сообщения от dc65k
 
Регистрация: 19.05.2020
Сообщений: 46

Как реализовать ввод в 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"),
)
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2021, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

dc65k,
https://javascript.ru/forum/dom-wind...-jquery-9.html
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2021, 15:11
Аспирант
Отправить личное сообщение для dc65k Посмотреть профиль Найти все сообщения от dc65k
 
Регистрация: 19.05.2020
Сообщений: 46

Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать выбранный файл (input file) ajax sasha3611 jQuery 1 11.02.2018 14:14
как обновить данные счетчика количества символов в input prog77 jQuery 4 08.07.2017 16:04
как прописать условия для полей input и textarea Nailya Общие вопросы Javascript 12 06.06.2013 16:48
Как реализовать ввод данных в скрипт? Ko1dun Events/DOM/Window 5 13.11.2011 21:33
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55