jQuery Mask Plugin: маска для отрицательных целых чисел

Question

Я использую jQuery Mask Plugin в своем веб-проекте. Он широко используется, и я пока не хочу его менять.

Я использую следующую маску для чисел с десятичными разделителями:

Например, для элемента:

<input class="number-field" value="123456"> 

Я использую следующую маску:

$('input.number-field').mask('#,##0', {'reverse': true}); 

Он работает для положительных номеров, но теперь я хочу добавить опору отрицательный номера.

Ни в одном из следующих режимов работы:

$('input.number-field').mask('#,##0Z', { 
    reverse: true, 
    translation: { 
    'Z': { 
     pattern: /\-?/ 
    } 
    } 
}) 

$('input.number-field').mask('Z#,##0', { 
    reverse: true, 
    translation: { 
    'Z': { 
     pattern: /\-?/ 
    } 
    } 
}) 

$('input.number-field').mask('Z#,##0', { 
    reverse: true, 
    translation: { 
    'Z': { 
     pattern: /-/, 
     optional: true 
    } 
    } 
}) 

Последний один кажется работает, но только для 4-х цифр в строке.

Как использовать этот плагин для отрицательных чисел? Я могу рассмотреть возможность исправления этого плагина, если кто-то может предложить идею.

Вы можете попробовать его с jsFiddle template

Answer 1

я расширил от вашей последней попытки и перевел специальный # символ рекурсивно принять цифры и дефис (то есть, /[\d-]/). Затем я изменил шаблон маскировки на #,##0.

Поскольку плагин не позволяет добавлять отрицательные/позитивные образы в шаблон регулярных выражений, я добавил обратный вызов onChange, чтобы предотвратить появление символов - из любого места, кроме начала строки.

• .replace(/(?!^)-/g, '') - Это удалит все - символы, которые не в начале строки.
• .replace(/^,/, '') - Это приведет к удалению ведущих символов , (т. Е. Удалит , из строки, такой как ,123).
• .replace(/^-,/, '-') - Это удалит , символов непосредственно с - символов (т. Е. Удалит , с -,123).

Updated Example

$('input.number-field').mask('#,##0', { 
 
    reverse: true, 
 
    translation: { 
 
    '#': { 
 
     pattern: /-|\d/, 
 
     recursive: true 
 
    } 
 
    }, 
 
    onChange: function(value, e) {  
 
    e.target.value = value.replace(/(?!^)-/g, '').replace(/^,/, '').replace(/^-,/, '-'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script> 
 
<input class="number-field" value="123456">

Кроме того, если вы хотите prevent the cursor indicator from jumping до конца строки при замене символов, вы можете использовать код из другого answer here.

$('input.number-field').mask('#,##0', { 
 
    reverse: true, 
 
    translation: { 
 
    '#': { 
 
     pattern: /-|\d/, 
 
     recursive: true 
 
    } 
 
    }, 
 
    onChange: function(value, e) { 
 
    var target = e.target, 
 
     position = target.selectionStart; // Capture initial position 
 

 
    target.value = value.replace(/(?!^)-/g, '').replace(/^,/, '').replace(/^-,/, '-'); 
 

 
    target.selectionEnd = position; // Set the cursor back to the initial position. 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script> 
 
<input class="number-field" value="123456">

Answer 2

Просто выберите символ перевести сигнал, им мой случай Z.

$("#input").mask("Z0999999.00", { 

    translation: { 
    '0': {pattern: /\d/}, 
    '9': {pattern: /\d/, optional: true}, 
    'Z': {pattern: /[\-\+]/, optional: true} 
    } 

}); 

И положил маску на входе.

<input id="input"/>