CODEWITHSUNDEEP
jqueryjquery-uispinner
sk3145
sk3145

Reputation: 174

JSFiddle does not let me set input value

I am implementing Jquery Numeric box in one of my page. I have to take numeric input from user which has its min and max value. The problem is that one I set the minimum value and try to input value using keyboard, it automatically displays minimum value without letting me input full value.

For example in the demo: Demo Link Here

max = $this.spinner('option', 'max'),
min = $this.spinner('option', 'min');

Min is set to 100 and Max is set to 1000 but if i want to input 500 from keyboard, once I press 5, it will automatically sets its value 100.

Has anyone has same issue?

Upvotes: 0

Views: 266

Answers (2)

Kais
Kais

Reputation: 2008

I made some changes in your code try this plunker:

HTML:

<input type="text" value="0" >

JS:

$("input").spinner({
    max: 1000,
    min: 100
}).on('blur', function () {
    if ($(this).data('onInputPrevented')) return;
    var val = this.value,

        $this = $(this),
        max = $this.spinner('option', 'max'),
        min = $this.spinner('option', 'min');

        // only allow numbers
       $(this).val($(this).val().replace(/[^0-9]/g, ''));

    // check input value
        if(val< 100 ){
            console.log(val.toString().length)
           if(val.toString().length == 1)
            $("input").val(val + 0 + 0);
            if(val.toString().length == 2)
                $("input").val(val + 0);


        }

});

Upvotes: 3

Ronen Cypis
Ronen Cypis

Reputation: 21470

I would change the .on('input'...) in your code to .on('blur'...), and change the value only after i know the user "finished" entering his input, and not before that like in your example.

Upvotes: 1

Related Questions