How do I get an input alert message to work only w

Question

How do I get an input alert message to work only when imputing alphabets, not for numbers? Without letting any text tipped in. When imputing numbers there should be no alerts, but when imputing alphabets you get an alert. I accept a JavaScript tagged solution too, but if there is an inline solution then that is preferred.

The problem with this function is that it lets the text you type in the box if you are fast tipper as I am. It should be without letting any text tipped in.

JavaScript:

<script language="JavaScript">
function checkInp()
{
    var x = document.forms["isnform04"]["areinp"].value;
    var regex = /^[0-9]+$/;
    if (!x.match(regex))
    {
        alert("no text here, input numbers only");
        return false;
    }
}
</script>

HTML:

<input type="text" name="areinp" size="30" value="" onChange="areCon()" onkeyup="return checkInp();">

No query solution plz.

UPDATE: I also used this one:

<input type="text" name="areinp" size="30" value="" onChange="areCon()" onkeyup="if (this.value=this.value.replace(/[^\d]/,'')) alert('no text here, input numbers only');">

Answer 1

You need to use preventDefault() if you want to to cancel the event, that is to disallow text box from accepting non-numeric input. So that you don't have to bother about deleting it. However, preventDefault() does not work with onkeyup. Use onkeydown.

JS:

function checkKey(e) 
{
    if (e.keyCode != 8 && // allow backspace
        e.keyCode != 46 && // allow delete
        e.keyCode != 37 && // allow left arrow
        e.keyCode != 39 && // allow right arrow
        (e.keyCode < 48 || e.keyCode > 57)) // allow numerics only
    {
        e.preventDefault();
    }
}

HTML:

<input type="text" onkeydown="checkKey(event)" />

Note - Alerting user on each key press / down / up is terrible. Simply annoying. Avoid! Silently block the unwanted keys as I showed above.

Answer 2

By playing around and mixing with different codes I found the answer on my own. I made a filter who lets only the characters chosen by me in the box and then added a alert message to it and WHALA there it works.

This is the answer I found:

JavaScript:

<script language="javascript" type="text/javascript">
function TextFilter(myfield, e)
{
    var key;
    var keychar;
    if (window.event)
    key = window.event.keyCode;
    else if (e)
    key = e.which;
    else
    return true;
    keychar = String.fromCharCode(key);

    if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
    return true;

    else if ((("0123456789.").indexOf(keychar) > -1))
    return true;

    else if ((keychar == ""))
    {
        if (myfield.value.indexOf(keychar) > -1)
        return false;
    }
    else
    return false;
}

function checkInp()
{
    var x = document.forms["isnform04"]["areinp"].value;
    var regex = /^[0-9]+$/;
    if (!x.match(regex))
    {
        alert("no text here, input numbers only");
        return false;
    }
}
</script>

HTML:

<input type="text" name="areinp" id="test" size="30" value="" onChange="areCon()" onkeypress="return TextFilter(this, event)" onkeyup="checkInp()">

Answer 3

Put a regular expression test in the onkeyup attribute.

onkeyup="if(/\D/.test(this.value)) alert('no text here, input numbers only')"