[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 467
  • 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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