Solved

Beep and restrict user to enter character in an input field

Posted on 1999-01-23
7
412 Views
Last Modified: 2013-12-03
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
Comment
Question by:peh
7 Comments
 
LVL 6

Expert Comment

by:PBall
ID: 1280067
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
 
LVL 10

Expert Comment

by:MasseyM
ID: 1280068
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1280069
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:peh
ID: 1280070
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1280071
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
 
LVL 2

Expert Comment

by:wpd
ID: 1280072
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 100 total points
ID: 1280073
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now