2014-11-06 3 views
0

Я хочу написать сценарий jQuery, который позволяет просто цифры и автоматически конвертировать в разделенную запятыми форму. Я написал этот код (это часть кода):Ограничить ввод, чтобы ввести только число в форме, разделенной запятой

function FillNumericalField(e, inp, CommaSeperated) { 
     var MainCharKey = e.which.toString(); 
     var IsShiftPresses = e.shiftKey; 

     if (dict_NumbersOnly[MainCharKey] == null || dict_NumbersOnly[MainCharKey] == 'undefined') { 
      e.preventDefault(); 
     } 
     else { 
      var NewChar = ''; 
      if (isValidDigitToShow(dict_NumbersOnly, MainCharKey)) { 
       e.preventDefault(); 
       NewChar = dict_NumbersOnly[MainCharKey]; 
       setValue(inp, NewChar, CommaSeperated); 
      } 
     } 
    } 

    $(document).on('keydown', '.NumbersOnly', function (e) { 
     FillNumericalField(e, $(this), false); 
    }); 

и запятая Разделения:

function CommaSeperation(str) { 
     return str.replace(/,/g, '').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
    } 

проблема, когда я хочу, чтобы ввести цифры в конце номера (например, '123') курсор остается после 3 не 4.

Кто-нибудь написал аналогичный код раньше?

благодаря

+0

вы можете сделать Quick JSFiddle пожалуйста? поможет вам решить вашу проблему. – prog1011

ответ

1

Вот мое решение, с некоторыми комментариями:

function NumbersOnly(e) { 
    if (e.type == 'keypress') { // detect the event type 
     // __on keypress__, prevent the user from typing forbidden chars 
     var char = String.fromCharCode(e.charCode); 
     return (
      // test if char is numeric or " ,/. " 
      (e.charCode == 0 || /[0-9,.\-]/.test(char)) 
      && 
      // test if char is " ,/. " : prevent input if the value already contains a " ,/. " 
      (!/[\.,]/.test(e.target.value) || !/[\.,]/.test(char)) 
      && 
      // negative numbers fix 
      (!/[\-]/.test(char) || (!/^\-/.test(e.target.value) && e.target.selectionStart == 0)) 
     ); 
    } else { 
     // __on keyup__ and __on paste__, convert "." to "," 
     if (/[\.,]/.test(e.target.value) || /(?!^)[\-]/g.test(e.target.value)) { 
      var caret_position = e.target.selectionStart; 
      e.target.value = e.target.value 
           // convert "." to "," 
           .replace('.', ',')  
           // on paste : remove forbidden characters 
           .replace(/[^0-9,\-]/g, '') 
           .replace(/(?!^)[\-]/g, ''); 
      // Fix multiple comma on paste : keep the first one, merge the others numbers 
      var multiCommaFixer = e.target.value.split(','); 
      multiCommaFixer = multiCommaFixer[0]+','+multiCommaFixer.slice(1, multiCommaFixer.length).join(''); 
      e.target.value = multiCommaFixer; 
      e.target.setSelectionRange(caret_position, caret_position); 
     } 
    } 
} 

$(document).on('keypress keyup paste', '.NumbersOnly', function (e) { 
    return NumbersOnly(e); // the same function will be used for both events 
}); 

You can try the JSFiddle demo here

+0

Спасибо. но у вашего кода есть некоторые проблемы. Невозможно передвигаться по номеру с помощью стрелок или 'Home',' End', ...- Невозможно ввести отрицательное число. Невозможно использовать 'Backspace',' Del' для стирания цифр – Arian

+1

Woops Я тестировал только этот хром, который позволяет использовать Backspace, Del и т. Д. Я сделал небольшую коррекцию, теперь это должно работать и на FF. – Sylvain

+0

Спасибо, но он все еще не принимает отрицательное число. – Arian