Решение события Keyup или маски ввода для ввода десятичных знаков при вводе текста, но не для изменения его десятичных знаков - PullRequest
Новая
       23

Решение события Keyup или маски ввода для ввода десятичных знаков при вводе текста, но не для изменения его десятичных знаков

0 голосов
/ 03 сентября 2018

Я пытался найти много решений, чтобы это работало, но в основном мне нужно иметь вход, в который можно вставлять целые числа, но не десятичные, но также показывать десятичную часть всегда как «, 00». Я пытался с jquery-inputmask без удачи, также играл с событиями, но просто есть слишком много случаев, чтобы покрыть событие. 3 ошибки из-за копирования и вставки числа, перемещения вперед и назад с помощью клавиш со стрелками. Ни с того, чтобы сказать с курсором, чтобы он всегда был в конце чисел и не был в состоянии изменить десятичные дроби.

Мое решение jquery было примерно таким: 

$('input[type="text"]').keyup(function(event){
    //In here I check for the user not to insert any period or comma's, as it will always be an integer at the end, also no spaces or letters
    if (event.which == 32 || !(event.which >= 48 && event.which <= 57) && !(event.which >= 96 && event.which <= 105))
        return false;
    //In here I say if the text already have a comma, then check if the value is larger than zero, then add ",00" and set the cursor to the end of the integer part
    if(!(this.value.indexOf(',') != -1)){
        if(accounting.unformat(this.value, ',') >= 0){
            this.value = this.value + ',00';
            this.setSelectionRange(this.value.length - 3, this.value.length - 3);
        }
    }
});

Как вы можете заметить, для получения точного пользовательского опыта уже достаточно условий, поэтому я попытался использовать jquery-inputmask и сказал что-то вроде: 

$('input').inputmask('currency', {
        prefix: '',
        radixPoint: ',',
        allowPlus: false,
        allowMinus: false,
        showMaskOnHover: false,
        showMaskOnFocus: false,
        clearMaskOnLostFocus: true,
        rightAlign: false,
        clearMaskOnLostFocus: true
    });

Это очень хорошее решение, хотя оно все еще позволяет мне изменять десятичные дроби. Затем я попробовал другой, который должен был обрабатывать его как десятичную, а не как валюту, а затем удалить десятичные дроби и добавить к нему суффикс «0,00», например: 

$('input[type="text"]').inputmask('decimal', {
    prefix: '',
    suffix: ',00', // Adding digits here...
    radixPoint: ',',
    allowPlus: false,
    allowMinus: false,
    showMaskOnHover: false,
    showMaskOnFocus: false,
    clearMaskOnLostFocus: true,
    rightAlign: false,
    clearMaskOnLostFocus: true,
    digits: 0 // removing digits here...
});

Это работает вроде нормально, но как только я пытаюсь набрать европейское число, такое как: 1.234,00, оно не позволяет набирать в текстовом поле такой номер. Еще хуже, если я попытаюсь ввести запятую "," он просто начинает сходить с ума и создавать множество чисел с запятыми.

Я использую этот плагин: https://github.com/RobinHerbots/Inputmask

У кого-нибудь был этот сценарий раньше?

Спасибо!

...