javascript - allow digits only for inputs - Stack Overflow

admin管理员组

文章数量:1334887

I;m trying yo implement a javacript function which will not allow to the user to input anything else than float numbers (digits)

This is my approach but I don't know how to improve it in order to allow submition of negatives numbers also (allow '-' key) and work on IE also.

function digits_only(evt, form) {
    var evt = evt || window.event,
        targ = evt.target || evt.srcElement,
        charCode = evt.which || evt.keyCode,
        keyChar = String.fromCharCode(charCode),
        isValid = true;
    if (charCode > 13) {
        isValid = /[0-9.]/.test(keyChar);
        //if a dolt is already in input
        if (keyChar === '.' && /\./.test(targ.value)) {
            isValid = false;
        }
    }
    return isValid;
}

I;m trying yo implement a javacript function which will not allow to the user to input anything else than float numbers (digits)

This is my approach but I don't know how to improve it in order to allow submition of negatives numbers also (allow '-' key) and work on IE also.

function digits_only(evt, form) {
    var evt = evt || window.event,
        targ = evt.target || evt.srcElement,
        charCode = evt.which || evt.keyCode,
        keyChar = String.fromCharCode(charCode),
        isValid = true;
    if (charCode > 13) {
        isValid = /[0-9.]/.test(keyChar);
        //if a dolt is already in input
        if (keyChar === '.' && /\./.test(targ.value)) {
            isValid = false;
        }
    }
    return isValid;
}

• javascript
• parsing

Share Improve this question Follow asked Apr 7, 2009 at 5:22 dole dougdole doug 36.1k2020 gold badges7272 silver badges8989 bronze badges 5

• HI, Is this a good approach? What happens if the user copies or drags some text into the input box. I think you should better do validation on submit event. – rahul Commented Apr 7, 2009 at 5:25
• yes, validation should be added too, but what he ask for now was restricting input – Dels Commented Apr 7, 2009 at 5:28
• But you cannot be sure by which way the user enters input. He can type, paste or even drag some text. – rahul Commented Apr 7, 2009 at 5:33
• +1. Don't interfere with the user's typing, it's just annoying and doesn't cover all possible ways to altering the field. – bobince Commented Apr 7, 2009 at 11:33
• client side is more cheaper...I'll do the validation on submit too – dole doug Commented Apr 7, 2009 at 14:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I think you are looking for so called "input masks". They are a lot more powerful then just allowing numbers. But you can surly use them for that. Google "javascript input mask" or check out this jQuery Plugin.

EDIT: Seems like the linked plugin only supports fixed length masks, but the term may be a good starting point...

Is this on an ASP.NET web application? You could use the AjaxControlToolkits MaskEditExtender.

I have asking similar question here:
restrict user input using javascript

but no one give the exact answer for the problem, so let's wait until WebForms 2.0 released

You can subscribe to "InputEvent" and then get "data" prop. For example

input.addEventListener('beforeinput', (event) => {
    const data = event.data;

    // if "data" is present - user enter some character
    // if "data" is NOT present - user tap non character key (e.g. delete, shift and other)
    if(data) {
        // check if data is number or "."
        const isAllow = /\d|\./.test(data);

        if(!isAllow) {
            e.preventDefault();
        }
    }
})

More info

1. event.data - https://developer.mozilla/en-US/docs/Web/API/InputEvent/data
2. beforeinput event - https://developer.mozilla/en-US/docs/Web/API/HTMLElement/beforeinput_event

本文标签： javascriptallow digits only for inputsStack Overflow