Solved

Beep and restrict user to enter character in an input field

Posted on 1999-01-23
7
450 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
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)
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…

734 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