CODEWITHSUNDEEP
javascriptjquery
IXTR Unai
IXTR Unai

Reputation: 377

Input type="number" selector not working

I want to restrict the input in multiple forms and I'm trying to remove letters from the input on the keyup event. The problem is that It seems to work only on type="text" inputs, but I need it on type="number" inputs.

Fiddle.

NOTE: I need this working at Firefox and IE. On chrome this functionality isn't neccesary.

$(function(){
      
  $('input[type="number"], [type="text"]').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number">
<input type="text">

Upvotes: 2

Views: 4708

Answers (5)

IXTR Unai
IXTR Unai

Reputation: 377

Okay guys, thanks for all the help, I think I finally solved here.

JSFiddle 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" oninput="this.value = this.value.replace(/[^0-9.,]/g, '');">
<input type="text" oninput="this.value = this.value.replace(/[^0-9.,]/g, '')">

Upvotes: 0

Buh Buh
Buh Buh

Reputation: 7546

The bug was happening because the way IE11 populates the value attribute is strange for type="number".
When I type '1a' then then this.value is '1a', so your code executes correctly.
When I type 'a1' then then this.value is '', so isNaN('') becomes false and your code doesn't execute.

I don't why IE11 is so strange.

I would recommend not using the isNaN and generally improving your coding standards. There were many minor issues already noted in comments.

Here is an example which works in IE11. (This still has some issues testing in Chrome, but you already stated you are not interest in Chrome)

$(function(){
    $('[type="number"], [type="text"]').keyup(function() {
        this.value = this.value.replace(/\D/g, '');
    })
    .on("cut copy paste",function(e){
        e.preventDefault();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number">
<input type="text">

Upvotes: 1

DigiFriend
DigiFriend

Reputation: 1184

You shouldn't have a space between the element selector and the attribute selector.

input [type="number"]

Should be:

input[type="number"]

The [type="text"] happens to work because it matches all elements with a type attribute that is set as text. It really should also be:

input[type="text"]

And the whole selector:

'input[type="number"],input[type="text"]'

There are also issues with the function - the two split('').reverse().join('')? Not needed.

A better approach for this function would be:

$('input[type="number"], input[type="text"]').keyup(function(e) {
    this.value = this.value.replace(/[^0-9-]/i, '');
})

Upvotes: 5

Sanyami Vaidya
Sanyami Vaidya

Reputation: 809

You can try this following link,

https://jsfiddle.net/tkfnxpvy/4/

use 

$('input[type="number"],input[type="text"]'.keyup(function(e){
});

Upvotes: 0

Gobinath M
Gobinath M

Reputation: 2021

Remove Space in between element(input) and attribute([type="text"])

$(document).ready(function(){
    $("input[type='text'],input[type='number']").keydown(function(){
        $("input[type='text']").css("background-color", "yellow");
    });
    $("input[type='text'],input[type='number']").keyup(function(){
        $("input[type='number']").css("background-color", "pink");
    });
});
</script>

Upvotes: 2

Related Questions