How can I use javascriptjquery to prevent a decimal point from being typed into an HTML text field? - Stack Overflow

admin管理员组

文章数量:1295887

I have a text field where the user will be entering a number and I want the number to be an integer. To do this, I want to ignore when a user types a decimal point.

Currently, I have a javascript function that checks the value of the field on keyup, and if the most recent character typed was a decimal point, it is removed. This creates an effect where the user types a decimal point, it appears, and then disappears. Is there a way to make the decimal point not show up at all?

I have a text field where the user will be entering a number and I want the number to be an integer. To do this, I want to ignore when a user types a decimal point.

Currently, I have a javascript function that checks the value of the field on keyup, and if the most recent character typed was a decimal point, it is removed. This creates an effect where the user types a decimal point, it appears, and then disappears. Is there a way to make the decimal point not show up at all?

• javascript
• jquery
• html

Share Follow edited Jun 4, 2013 at 18:41 Jason Sundram 12.6k2020 gold badges7272 silver badges8686 bronze badges asked Jun 4, 2013 at 17:54 CristianoCristiano 2,90988 gold badges2727 silver badges3737 bronze badges 3

• It would be more user-friendly to allow all input but show a message that requests an integer when something invalid is typed. – Bergi Commented Jun 4, 2013 at 17:57
• i plan to show a message when a user inputs a decimal point as well as removing it – Cristiano Commented Jun 4, 2013 at 18:00
• 1 Don't forget, a user can always paste (ctrl + v) or drag the character in. Instead of preventing a keypress, you should re-check the whole item's value and strip out decimals. Or, do it on the change event instead – Ian Commented Jun 4, 2013 at 18:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Use keypress event:

http://jsfiddle/wAJp7/1

$('input').on('keyup', function (e) {
    if (e.which === 46) return false;
}).on('input', function () {
    var self = this;
    setTimeout(function () {
        if (self.value.indexOf('.') != -1) self.value = parseInt(self.value, 10);
    }, 0);
});

Use a function on .keydown() that check wich key is pressed. if it's ".", preventDefault().

$('input').keydown(function(e){
    var kCode = (e.which || e.keyCode)
    if(kCode == 190 || kCode == 110) return false;
    if(e.which === 86 && (e.ctrlKey || e.metaKey)) return false;
})

Fiddle : http://jsfiddle/PsqhJ/1/

Edit: Added preventing user to ctr+v.

// don't do anything unless a number key is pressed
$("input").on("keypress", function(event) {
  if (event.which < 48 || event.which > 57) {
    event.preventDefault();
  }
});

It's perhaps not the most user friendly solution - it would be more friendly to mark the field as invalid in some way and ask them to correct it - but this will guarantee that you get an integer.

JS Bin Demo

This will stop the user from being able to submit data when it contains a decimal point or any other symbol or letter. There are other ways in which you can stop the user even typing these characters in by checking for key codes but i found it easier by bining the two, as sometimes i want decimal points and sometimes I dont.

Javascript:

function NoDecimal(o)
{
    if (o.value.length > 0) 
    {
        var objReg = /^\d{0,10}?$/;
        if (objReg.test(o.value))
        {
            o.style.borderColor='';
            o.style.fontWeight='normal';
            document.getElementById('submit').disabled = false;
        }
        else
        {    
            o.style.borderColor='red';
            o.style.fontWeight='bold';
            document.getElementById('submit').disabled=true;
        }    
        return false;
    }
}

HTML:

Number: <input type="text" onkeyup="NoDecimal(this);">

You can also use onkeyup, onkeydown, onkeypress and oninput but older browsers don't handle oninput as its part of html5. Particularly earlier Internet Explorer Versions

本文标签：