Как автоматически форматировать пользовательский ввод 4 цифры до последних 2 цифр -- javascript поле с участием jquery поле с участием html пол Связанный проблема

How to Automatically Format User Input 4 digits to last 2 digits


-8
vote

проблема

русский

У меня есть текстовое поле срок действия к кредитным картам, который пользователь, способный ввести 4 цифры, но я хочу автоматически форматировать ввод пользователя 4 цифры для последних 2 цифр.

Итак, если пользовательский ввод 2022, я хочу автоматически изменяться на последние две цифры «22». Я попробую максимальную длинку 2 в HTML-входе, но это не работает для меня.

Это попробуйте отформатировать 4 цифры в 2 цифры.

Английский оригинал

I have the credit card expiring text field that user able to type in 4 digit but i want to automatically format user input 4 digits to last 2 digits.

So, if user input 2022, i want automatically changed to last two digits "22". I have try the maxlength 2 in html input but that doesn't work out for me.

This is try format the input 4 digits to 2 digits.

</div
        
         
         

Список ответов

0
 
vote

Хотя я не верю, что это хороший выбор, чтобы пользователь написал полный год и показать только последние 2 цифры, вы можете попробовать это Widdle и / или это Widdle . < / P >.

 <код> <input id="year" data-fullyear="" placeholder="yyyy" maxlength="4">  $("#year")   .on("blur",e=>{         let $this = $(e.currentTarget);     let value = $this.val();     if(value.length===4){         $this.data("fullyear",value)         $this.val(value.substring(2));     }else{         $this.data("fullyear","")         $this.val("");     }   })   .on("focus",e=>{     let $this = $(e.currentTarget);     let value = $this.val();     if(value.length===2){         let fullYear = $this.data("fullyear");         $this.val(fullYear);     }else{         $this.val("");     }   });   

 

Although i don't believe that it's a good choice to let the user write a full year and show only the last 2 digits, you could try this fiddle and/or this fiddle.

<input id="year" data-fullyear="" placeholder="yyyy" maxlength="4">  $("#year")   .on("blur",e=>{         let $this = $(e.currentTarget);     let value = $this.val();     if(value.length===4){         $this.data("fullyear",value)         $this.val(value.substring(2));     }else{         $this.data("fullyear","")         $this.val("");     }   })   .on("focus",e=>{     let $this = $(e.currentTarget);     let value = $this.val();     if(value.length===2){         let fullYear = $this.data("fullyear");         $this.val(fullYear);     }else{         $this.val("");     }   }); 
</div
 
 

Связанный проблема

13  Как перечислить все зарегистрированные события узла DOM с помощью JavaScript?  ( How to list all registered events of a dom node using javascript ) 
Я могу добавить или удалить обработчик событий для узла DOM. Можно ли выяснить все зарегистрированные обработчики событий данного узла DOM? Я имею в виду прям...

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

1  Поток данных в реальном времени на веб-страницу  ( Stream realtime data to web page ) 
Я работаю над проектом, где мы хотим отслеживать данные на канале Comm и предоставить обратную связь на веб-страницу. Данные будут прочитаны процессом, работа...

0  Как добавить значение для массива после проверки другого массива  ( How to add value to array after checking another array ) 
У меня есть два массива как таковые: <код> UserGroupUser[{Id:"1",UserId:"2",UserGroupId"1"}, {Id:"2",UserId:"3",UserGroupId"1"}, {Id:...

0  Анимация холста, проблема с расчетами математики в моем коде JavaScript  ( Canvas animation issue with math calculations in my javascript code ) 
<Сильная> идея: Привет, это мой первый эксперимент с холстом анимацией. Я не уверен, что эта концепция уже существует, но я назвал мою версию «Двухугосудар...

0  Почему угловые $ не удаляют старое значение?  ( Why is angular scope not removing old value ) 
У меня есть следующий контроллер <код> angular.module('publicApp') .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeou...

2  Это хорошая идея до $ .post в Google Spreadsheet?  ( Is it a good idea to post to google spreadsheet ) 
Я пытаюсь разработать функцию в моей веб-странице, которая посылает данные как можно добраться до доступа к центральному репозиторию позже. Было бы здорово, е...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

3  OnleftClick & OnrightClick JavaScript Функции  ( Onleftclick onrightclick javascript functions ) 
В моем боковом коде сервера я динамически строим таблицу и именно сейчас я добавляю следующий код, чтобы обрабатывать Щелчок строки. <код> tr.Attributes.Add...

1  Изолированные Директива охвата с двусторонним связыванием не отражает изменения в объеме контроллера  ( Isolated scope directive with two way binding doesnt reflect changes in control ) 
<Сильное> Сводка: При попытке изменить переменную область (массив), которая была установлена ​​для двухстороннего привязки данных в пределах выделенной дир...

1  Расширение фона с помощью JavaScript  ( Extending a background using javascript ) 
У меня есть страница, которая выглядит так <код> ----------------------------------- | ************* | | ************* ...

1  Путь нужна модуль в узле JS Работа в Windows, но не в Linux  ( Path of require module in node js work in windows but not in linux ) 
У меня это в моем коде <Код> var queries = require('./Queries.js'); При запуске сервера узла в Windows CMD в порядке. Я клонировать пролей в сервере Li...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

1  Как я могу выбрать вторую кнопку Отмена, а не первым?  ( How can i select the second cancel button instead of the first ) 
Я хочу отменить второй элемент строки вместо первого. Ниже приведен какой-то пример код для 2 позиций: <код> <div class="screenlet-body"> <form na...

0  Asp.net внутри тега скрипта  ( Asp net inside a script tag ) 
Я пытаюсь получить некоторую работу с некоторыми JavaScript, который делает график в зависимости от предоставленной вами информации. Я говорю о Это <код...

Связанный проблема

13  Как перечислить все зарегистрированные события узла DOM с помощью JavaScript? 
0  По какой-то причине мой нижний колонтитул не очень мобильный 
1  Поток данных в реальном времени на веб-страницу 
0  Как добавить значение для массива после проверки другого массива 
0  Анимация холста, проблема с расчетами математики в моем коде JavaScript 
0  Почему угловые $ не удаляют старое значение? 
2  Это хорошая идея до $ .post в Google Spreadsheet? 
-2  Динамический фон WordPress на основе изображений слайдера 
3  OnleftClick & OnrightClick JavaScript Функции 
1  Изолированные Директива охвата с двусторонним связыванием не отражает изменения в объеме контроллера 
1  Расширение фона с помощью JavaScript 
1  Путь нужна модуль в узле JS Работа в Windows, но не в Linux 
0  Как создать элемент DOM в другой шаблон? 
1  Как я могу выбрать вторую кнопку Отмена, а не первым? 
0  Asp.net внутри тега скрипта