Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 466
  • Last Modified:

Beep and restrict user to enter character in an input field

I want to restrict user to enter characters in an input field.  I m currently check the field after the user input and alert a message to the user. But, I found this way very annoying.  Can I just restrict the user by not allowing them to key in the characters when the field is on focus and then beep maybe?? Can I do this with Java Script? Thanks.
0
peh
Asked:
peh
1 Solution
 
PBallCommented:
yes you can, but only on the 4.0 browsers.

I only do IE so I can only show you example that work on that browser:
<script>
function docOnKeyPress() {
  var e = window.event;
  var s = e.srcElement;

  e.cancelBubble = true;

  if (s.charOnly) {
    //filter your input here, in this case, I am only capturing
    //lowercase characters (a (ASCII 97) to z (ASCII 122))
    //and when the user pressed those key, i just make them
    //lowercase (97 - 32 = 65 which is A).
   
    //to ignore a certain character when it is detected,
    //simple set the e.keyCode = 0

    if (e.keyCode >= 97 && e.keyCode <=122)
        e.keyCode -= 32;
  }
}
</script>
:
<body onKeyPress='docOnKeyPress()' ....>
:
<input charOnly=true type=text name=something value=''>
:
</body>

Good luck :)

0
 
MasseyMCommented:
I found this... maybe it will help you out?

<HTML>
<HEAD>
<TITLE>ScriptLibrary!</TITLE>
<!--exclude-->
<META NAME="WEB_CONTENT_TYPE" CONTENT="Other">
<META NAME="WEB_PAGE_CLASS" CONTENT="Destination">
<META NAME="WEB_COPY_DATE" CONTENT="19980815">
<META NAME="WEB_PAGE_CLASS" CONTENT="Frame">

<STYLE TYPE="text/css">
<!--
blfont {color:#99ccff}
redfont {color:#CC0033}
yllwfont {color:#FFFF33}
whitefont {color:#FFFFFF}
A:hover { color:#FF0000; }
A:link { color:#333399; }
-->
</STYLE>

<SCRIPT LANGUAGE = "JavaScript">

<!--
   var count = 0;    
   var doPolling;

  function stopPolling(){
    clearTimeout(doPolling)
 }

   function polling(){
           doPolling = setTimeout("looking()",100)
   }

    function looking(){
          document.form1.text1.blur()
        theInput = document.form1.text1.value;  
        entered = theInput.length;  
        if(entered > count){
          //keypress has occurred in text field
          alert("You entered a:\n       " + theInput.substring(count,entered + 1))
          count++
         }
          document.form1.text1.focus()
          polling()

    }
 // -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#ffffff" link="#CC0033" vlink="#333399" alink="#FF0000" onLoad="parent.ad.location.href='/devhead/resources/scriptlibrary/scripts/ad.html'; return true;">

<!--content start-->
<TABLE WIDTH="96%" BORDER="0" CELLSPACING="5" CELLPADDING="5">
<TR><TD WIDTH="100%">
<FONT FACE="ARIEL,HELVETICA" SIZE="-1">

<img src="/devhead/graphics/tophead.gif" width="35"  height="35"  border="0" alt="DevHead"><FONT COLOR="#003399" FACE="ARIEL,HELVETICA" SIZE="-1"><B>Live Demo: Event Polling in JavaScript</B></FONT>
<P>
<FORM NAME = "form1">
<b>Enter Something:</b></FONT>
<INPUT TYPE = "text" NAME = "text1" onFocus = "polling()" onBlur = "stopPolling()">
</FORM>
</FONT>
</TD></TR>
</TABLE>
<!--content stop-->

</BODY>
</HTML>
0
 
Michel PlungjanIT ExpertCommented:
I got this from IDT, so simple that one screams (NS4+ and IE4+) ;-):

<FORM>
<INPUT TYPE="text" onKeyPress="checkChars(this.value)">
</FORM>

combined with a test like

<SCRIPT>
function checkChars(s) {
    for (i=0,n=s.length; i < n; i++)
    {
        var c = s.charAt(i);
        if  (! ((c >= "a") && (c <= "z")) && !((c >= "A") && (c <= "Z")) ) {
            alert('a-z, A-Z only, please')
            break;
        }
    }
}
</SCRIPT>

Michel
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
pehAuthor Commented:
Hi, Michel. Thanks for your proposed answer.  But...
I think this is not what I want because it's only check for the input after the user input shown in the textbox and it didn't work for the first character input by the user too.  I want something like what Pball have suggested, totally ignore the character input and not show it up in the textbox.  But, what Pball have suggested only work in IE and not NS...Can I have something that work for both browser?

--PEH--
0
 
Michel PlungjanIT ExpertCommented:
That is strange behavior.
My script should work in both browsers

Try this then - it will remove the unwanted char:

<HTML>
<FORM>
<INPUT TYPE="text" onKeyUp="checkChars(this)">
</FORM>
<SCRIPT>
function checkChars(t) {
   var s = t.value;
   for (i=0,n=s.length; i < n; i++) {
      var c = s.charAt(i);
      if  (! ((c >= "a") && (c <= "z")) && !((c >= "A") && (c <= "Z")) ) {
         alert('a-z, A-Z only, please');
         if (s.length>1) t.value = s.substring(0,s.length-1);
         else t.value='';
         break;
      }
   }
}
</SCRIPT>
</HTML>

0
 
wpdCommented:
if you simply want to prevent access to the field, use (IE4 only):

<INPUT NAME=fld TYPE=TEXT DISABLED=Yes>

or

fld.disabled = True; // javascript
0
 
Michel PlungjanIT ExpertCommented:
I will answer this...

         <HTML>
         <FORM>
         <INPUT TYPE="text" onKeyUp="checkChars(this)">
         </FORM>
         <SCRIPT>
         function checkChars(t) {
            var s = t.value;
            for (i=0,n=s.length; i < n; i++) {
               var c = s.charAt(i);
               if  (! ((c >= "a") && (c <= "z")) && !((c >= "A") && (c <= "Z")) ) {
                  alert('a-z, A-Z only, please');
                  if (s.length>1) t.value = s.substring(0,s.length-1);
                  else t.value='';
                  break;
               }
            }
         }
         </SCRIPT>
         </HTML>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now