Input с денежной маской

@Medsestrun · Регистрация: 12.12.2013

Студворк — интернет-сервис помощи студентам

Добрый день.

Есть input, на нём висит onChange, при каждом вводе я прогоняю event.currentTarget.value через такой код

JavaScript
1
var goodStr = /^[+]?\d+(?:\.?\d{0,2})$/.test(event.currentTarget.value)

Входные данные проверяются верно(формат - хххх.хх), но из-за особенностей фремворка - такой вариант (с test) мне не подходит, единственный вариант - делать через replace, т.е. заменять неверные символы на '' прямо на лету, но никак не могу первести эту регулярку в регулярку для replace, может кто сталкивался с такой проблемой и подскажет решение?

@BANO · 12.10.2015, 22:09

Medsestrun, а какие символы вас не устраивают?

Добавлено через 1 минуту
в смысле, что именно удалять?

Добавлено через 4 минуты
могу предложить вот такую проверку

JavaScript
1
2
3
4
5
6
7
function v(str){
    str=str.trim().replace(/[^\d\.]+/gi,"");
    var s=str.indexOf(".",str.indexOf("."))
    if(!s)
        str=str.substr(0,s-1);
    return str
}

@Vadim_Lasso · 12.10.2015, 22:23

Сообщение от Medsestrun

- (формат - хххх.хх)
- делать через replace
- заменять неверные символы прямо на лету

Например так: https://jsfiddle.net/312odg8t/1/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>vadim.lasso@gmail.com</title>
    </head>
    <body>
        <form action="">
            <input type="text" name="money" value="" />
        </form>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script language="javascript">
            $(function() {
                var cursorPosition = 0;
                $('input[name="money"]').on('keyup', function(event) {
                    cursorPosition = $(this).getCursorPosition();
                    var code = event.keyCode || event.which;
                    if(code == 37 || code == 39)
                       return;
                    var currentStr = $(this).val();
                    var replaceFlag = false;
                    
                    var goodStr = currentStr.replace(/^(\d+\.?\d{0,2}).*$/,  function(match, contents) {
                        replaceFlag = true;
                        return contents;
                    });
                    
                    if (replaceFlag) {
                        $(this).val(goodStr);
                        $(this).setCursorPosition(cursorPosition);        
                    } else $(this).val('');
                });
            });
 
            (function($) {
                $.fn.getCursorPosition = function() {
                    var input = this.get(0);
                    if (!input) return;
                    if ('selectionStart' in input) {
                        return input.selectionStart;
                    } else if (document.selection) {
                        input.focus();
                        var sel = document.selection.createRange();
                        var selLen = document.selection.createRange().text.length;
                        sel.moveStart('character', -input.value.length);
                        return sel.text.length - selLen;
                    }
                }
            })(jQuery);
 
            $.fn.setCursorPosition = function(pos) {
              this.each(function(index, elem) {
                if (elem.setSelectionRange) {
                  elem.setSelectionRange(pos, pos);
                } else if (elem.createTextRange) {
                  var range = elem.createTextRange();
                  range.collapse(true);
                  range.moveEnd('character', pos);
                  range.moveStart('character', pos);
                  range.select();
                }
              });
              return this;
            };
        </script>
    </body>
</html>

@BANO · 12.10.2015, 22:56

Не по теме:

LASSO, сколько кода, а всё из-за какой-то дурацкой функции

Добавлено через 6 минут
вот мой рабочий пример
конечно его можно дополнить, ограничением чисел после точки

Добавлено через 14 секунд
я могу это сделать, там тогда код короче даже будет

@Vadim_Lasso · 12.10.2015, 23:05

Не по теме:

Сообщение от BANO

конечно его можно дополнить, ограничением чисел после точки

+ два "бага":

-нельзя клавишами ← и → передвинуть курсор в поле ввода в другое место (только мышкой)
-если дополнительно ввести цифру например перед точкой или в любом другом месте, курсор перескакивает в самый конец строки

@Fedor Vlasenko · 12.10.2015, 23:16

HTML5
1
<input id="test">

JavaScript
1
2
3
4
5
6
test.onkeyup = test.oninput = function () {
    this.value = this.value.replace(',', '.');
    if (!/^-?\.?$/.test(this.value) && !isFinite(this.value)) {
        this.value = parseFloat(this.value) || this.value.slice(0, -1);
    }
};

можно убрать отрицательные если нужно
if (!/^\.?$/.test(this.value) && !isFinite(this.value)) {

@BANO · 12.10.2015, 23:25

LASSO, ну это не баги, это фишка)))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	12.10.2015, 22:56
	Не по теме: LASSO, сколько кода, а всё из-за какой-то дурацкой функции Добавлено через 6 минут вот мой рабочий пример конечно его можно дополнить, ограничением чисел после точки Добавлено через 14 секунд я могу это сделать, там тогда код короче даже будет 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	12.10.2015, 23:25
	LASSO, ну это не баги, это фишка))) 1