javascript - Input type="number" selector not working - Stack Overflow

admin管理员组

文章数量:1332383

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=".9.1/jquery.min.js"></script>
<input type="number">
<input type="text">

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number">
<input type="text">

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 9:35 IXTR Unai asked May 23, 2017 at 9:09 IXTR UnaiIXTR Unai 37744 silver badges1717 bronze badges 9

• 2 Remove the space? input [type -> input[type – evolutionxbox Commented May 23, 2017 at 9:10
• 4 which browser you are using to test? in chrome it works. – Dinesh undefined Commented May 23, 2017 at 9:10
• 1 remove space. Use input[type="number"], input[type="text"] – Tushar Commented May 23, 2017 at 9:11
• 1 I just edited, chrome doesn´t allow you to put text on number type inputs. I'm testing this at Firefox and IE11. – IXTR Unai Commented May 23, 2017 at 9:12
• change your selector $('input[type="number"],input[type="text"]') – JYoThI Commented May 23, 2017 at 9:15

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 5

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, '');
})

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>

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('') bees false and your code doesn't execute.

I don't why IE11 is so strange.

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

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number">
<input type="text">

You can try this following link,

https://jsfiddle/tkfnxpvy/4/

use

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

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

JSFiddle

<script src="https://ajax.googleapis./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, '')">

本文标签： javascriptInput typequotnumberquot selector not workingStack Overflow