2015-06-19 5 views
2

Я пытаюсь создать яваскрипт функцию, которая вызывается на keypress событии на input, который делает следующее:проверка вводимых данных с десятичной точностью и масштабом

  • Ввод должен быть десятичным с форматом (5,2) => (XXXXX.YY), которые являются переменными для функции. Ввод ограничен, если пользователь добавляет любое значение, которое не соответствует формату выше.
  • Если существующий вход начинается с . Append 0 в автоматический запуск

HTML

<input type="text" onkeypress="return checkDecimal(event, this, 5, 2);" id="price2" value="27.15"> 

Javascript

function checkDecimal(evt, item, lenBeforeDecimal, lenAfterDecimal) { 
    var charCode = evt.which; 

    var trimmed = $(item).val().replace(/\b^0+/g, ""); 
    if(checkStartsWith(trimmed, '.') == true){ 
     trimmed = '0' + trimmed; 
    } 

    //Allow following keys 
    //8 = Backspace, 9 = Tab 
    if(charCode == 8 || charCode == 9){ 
     return true; 
    } 

    //Only a single '.' is to be allowed 
    if(charCode == 46){ 
     var dotOccurrences = (trimmed.match(/\./g) || []).length; 

     if(dotOccurrences != undefined && dotOccurrences == 1){ 
      return false; 
     }else{ 
      return true; 
     } 
    } 

    if (charCode > 31 && ((charCode < 48) || (charCode > 57))) { 
     return false; 
    } 
    if ($(item).val() != trimmed){ 
     $(item).val(trimmed);} 


    //Check the start and end length 
    if(trimmed.indexOf('.') == -1){ 
     if(trimmed.length >= parseInt(lenBeforeDecimal)){ 
      return false; 
     } 
    }else{ 
     var inputArr = trimmed.split("."); 
     if(inputArr[0].length > parseInt(lenBeforeDecimal) || inputArr[1].length >= parseInt(lenAfterDecimal)){ 
      return false; 
     } 
    } 

    return true; 
} 
function checkStartsWith(str, prefix){ 
    return str.indexOf(prefix) === 0; 
} 

Вопросы

  • Если пользователь вводит 12345.9, а затем перемещает каретку позицию после 5, пользователь может добавить еще одну цифру перед десятичной 123456.9, которые не должны быть разрешено.
  • Если пользователь вводит 1.9, а затем удалить 1 и добавить 5, 5 добавляется в конце, и введенное значение становится 0.95 и не 5.9

JS Fiddle

+1

Проверка нажатий клавиш и попытка переопределения пользовательского интерфейса обычно чрезвычайно сложны и не работают в разных браузерах. Рассмотрите возможность проверки фактического значения и перехода оттуда. – RobG

ответ

1

Рассмотрим с помощью регулярного выражения, как:

/^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/; 

, который позволяет все вплоть до нужного формата, включая возвращает ложь, если номер детали больше чем 5 цифр, или если доля составляет более 2 цифры, например .:

<input type="text" onkeyup="check(this.value)"><span id="er"></span> 

<script> 

function check(v) { 
    var re = /^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/; 
    document.getElementById('er').innerHTML = re.test(v); 
} 

</script> 

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

/^\d{5}\.\d{2}$/.test(value); 

, чтобы убедиться, что это необходимый формат.

Я не понимаю требования добавления начального нуля к "." так как пользователь должен ввести 5 ведущих цифр в любом случае (если я не понял вопрос).

+0

Спасибо за ваш ответ. Я использовал эту функцию в разных полях ввода, которые имеют разные требования к точности и масштабируемости. Вот почему моя функция имеет эти параметры. Для «ведущего нуля до' .' »это потому, что' .25' является допустимым значением, которое должно отображаться как «0,25» – ughai