Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Beep and restrict user to enter character in an input field

Posted on 1999-01-23
7
Medium Priority
?
462 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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 200 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

670 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