restrict to 1 decimal places in keypress of a text box?

Question

I want to enter a decimal point in a text box. I want to restrict the user by not allowing more than 1 digits after the decimal point.And restrict after decimal point enter only the number 5. I have written the code for it in the Keypress event. Using keypress event i want the series like:

1,1.5,2,2.5,3,3.5,4,4.5,5.

only the number between 1 and 5. how can i do this?

Check carat position to allow character insertion before the decimal. correct issue pointed out by ddlab's comment and only allow one dot.. The code is working but i have an issue if i enter 10 its working, i am not able to do so.i want numbers between 1 and 5.

function checkDecimal(_this, EventKey) {
    //            var key = EventKey.which || EventKey.keyCode;
    //            if ((key <= 57 && key >= 48 && _this.value.length == 0) || key == 8 || key == 9 || key == 37 || key == 39) {
    //                return true;
    //            }
    //            else {
    //                return false;
    //}


    var charCode = (EventKey.which) ? EventKey.which : event.keyCode;
    var number = _this.value.split('.');


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

    //just one dot (thanks ddlab)
    if (number.length > 1 && charCode == 46) {
        return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(_this);
    var dotPos = _this.value.indexOf(".");
    if (caratPos > dotPos && dotPos > -1 && (number[1].length > 0)) {

        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
}
        its not working properly,Can you tell me what could be the issue?

i want to enter one digit before and after dot.not allow characters only integers

Answer 1

Here you are, this will work with 1,1.5,2,2.5,3,3.5,4,4.5,5. as you type.

JQuery version:

var oldValue = '';
$('input').on('input', function() {
  console.log($(this).val());
  if (!$(this).val()) {
    oldValue = '';
    return;
  }
  if (!/^[1-5](\.|(\.5))?$/.test($(this).val()) || $(this).val() > 5) {
    $(this).val(oldValue)
  } else {
    oldValue = $(this).val();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Javascript version:

var oldValue = '';
document.querySelector('input').oninput = function () {
    console.log(this.value);
    if (!this.value) {
        oldValue = '';
        return;
    }
    if (!/^[1-5](\.|(\.5))?$/.test(this.value)  || this.value > 5) {
        this.value = oldValue;
    } else {
        oldValue = this.value;
    }
};

Hope this helps.

Answer 2

Try using regular expressions. You can read about them here. The corresponding regex would be :-

/^[1-5](\.[1-5])?$/

So let's say our input text is in a variable input.

if (input.search(/^[1-5](\.[1-5])?$/)==-1)
{
    //flag an error message and don't change DOM element
}

Answer 3

With the answer of Kalpesh Krishna:

 $(element).on('keypress', function() {
       var regexp = '/^[1-5](\.[1-5])?$/';
       var value = $(this).val();
       if(regexp.test(value)) {
            // it passed
       } else {
            // it not passed
       }
 });