Ограничить до 2 знаков после запятой нажатием текстового поля?

Я хочу ввести десятичную точку в текстовое поле. Я хочу ограничить пользователя, введя более двух цифр после десятичной точки. Я написал код для достижения этого в событии Keypress.

function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    if (charCode == 46 && el.value.indexOf(".") !== -1) {
        return false;
    }

    if (el.value.indexOf(".") !== -1)
    {
        var range = document.selection.createRange();

        if (range.text != ""){
        }
        else
        {
            var number = el.value.split('.');
            if (number.length == 2 && number[1].length > 1)
                return false;
        }
    }

    return true;
}
<asp:TextBox ID="txtTeamSizeCount" runat="server" onkeypress="return validateFloatKeyPress(this,event);" Width="100px" MaxLength="6"></asp:TextBox>

Код работает, но проблема заключается в следующем: если я введу ". 75" , а затем измените его на "1.75" , это невозможно. Единственный способ сделать это - удалить его полностью, а затем ввести "1.75" . Эта проблема возникает, если в текстовом поле уже записано 2 цифры после десятичного знака. Условия, которые я налагаю,

a) После десятичной даты он должен иметь по крайней мере 1 или 2 цифры. Для ex .75 или .7 или 10.75 или 333.55 или 333.2 принимается. но не .753 или 12.3335

b) Перед десятичной точкой это не обязательно для пользователя, чтобы ввести значение. Пользователь также должен также ввести целые числа.

Можете ли вы сказать мне, что может быть проблемой?

Спасибо,
Jollyguy

Ответ 1

Ты был почти там. Просто проверьте, что после десятичной запятой осталось не более двух символов.

ОБНОВЛЕНИЕ 1 - проверьте положение каратэ, чтобы разрешить ввод символов перед десятичной точкой.
ОБНОВЛЕНИЕ 2 - правильная проблема, отмеченная комментарием ddlab, и разрешающая только одна точка.

 function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //just one dot (thanks ddlab)
    if(number.length>1 && charCode == 46){
         return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
        return false;
    }
    return true;
}

//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', o.value.length)
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}

~~http://jsfiddle.net/S9G8C/1/~~
http://jsfiddle.net/S9G8C/203/

Ответ 2

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

function validateFloatKeyPress(el) {
    var v = parseFloat(el.value);
    el.value = (isNaN(v)) ? '' : v.toFixed(2);
}

<input id="aninput" type="text" onchange="validateFloatKeyPress(this);" />

Ответ 3

Рассмотрим использование API проверки ограничений HTML5. Я не обязательно запрещаю печатать недопустимые значения, но поле помечено как недопустимое, и оно приостанавливает отправку <form> (по умолчанию). Я добавил <output>, чтобы проиллюстрировать, почему браузер рассматривает, например. "1.100" действительное значение (оно видит числовое значение как "1.1" ).

<input id="n" type="number" step=".01">

var
  n = document.getElementById('n'),
  o = document.getElementById('o'),
  didInputN = function(e) {
    o.value = n.valueAsNumber;
  };

n.addEventListener('input', didInputN);

input:invalid {
  color: white;
  background-color: red;
}

<input id="n" type="number" step=".01">
<output id="o" for="n"></output>

Ответ 4

 function decimalValidation(el, evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode;
       var number = el.value.split('.');
         if(charCode == 8) {
          return true;
         }
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        //just one dot
        if(number.length>1 && charCode == 46){
             return false;
        }
        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
            return false;
        }
        return true;
    }

function getSelectionStart(o) {
    return o.selectionStart
}

Привет @webvitaly Приведенный выше код будет работать в IE, пожалуйста, проверьте И backspace после десятичных дробей, не работающих в Mozilla, я обновил свой ответ.

Ответ 5

этот код очень полон, я меняю "." на "," :

не может "," в начале

не может писать больше ","

<script type="text/javascript">

    function isNumberKey(evt, el) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split(',');
        var caracter = el.value;

        if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        if (charCode == 44 && caracter == "") {
            return false;
        }

        if (charCode == 44 && caracter.indexOf(",") != -1) {
            return false;
        }

        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(",");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
            return false;
        }
        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

</script>

Ответ 6

1.)No multiple decimals points.
2.)Two numbers after decimal point.
3.)Allow only Numbers and one decimal point(.).

Это поможет. jsFiddle