?
Solved

Only allow certain characters in an input field?

Posted on 2005-03-21
6
Medium Priority
?
9,322 Views
Last Modified: 2008-01-09
Is it possible to define which characters can be used for certain input fields? And I don't mean form validation, I know how to do that... I want to actually disallow the character from even showing up with typed. I am going to have several input fields on a page, some that only allow numbers, some that only allow text, some that allow HTML markup, is there a way I can define the characters in a function and assign the needed function to my input field? For example, say I have a field for your name, I do not want you to be able to put in a number, so I could have a funtion in my javascript that lists all of the available characters, let's call the function allow_alpha, in the HTML, i'd like to somehow assign that function to the field, like <input type="text" on keyup="allow_alpha();" /> or something to the sort. Is that possible? And I do not need an error checking as that will be done server side via PHP, plus there will be description letting the user know which characters they can use.
0
Comment
Question by:MaybeItsJeremy
[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
  • 3
  • 2
6 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13596548
This matches numbers only

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Letters ONLY</title>
<script type="text/javascript">

function alpha(e) {
    var k;
    document.all ? k = e.keyCode : k = e.which;
    var char = String.fromCharCode(k);
    if(!char.match(/[\d]/))return false;
   
    return true;
   
   
}

</script>
</head>
<body>
<div>
<form id="example" action="javascript://">
<input type="text" onkeypress="return alpha(event)" />
</form>
</div>
</body>
</html>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13596570
And by changing

if(!char.match(/[\d]/))return false;

to

if(!char.match(/[\dA-Z]/i))return false;

it matches numbers and letters only
0
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 2000 total points
ID: 13596616
there are no bulit in functions but here are a few custom bulit

<script>
function allow_alpha(obj){
 if (/[^a-z]/i.test(obj.value))
  obj.value=obj.value.replace(/[^a-z]/gi,'')
  obj.value+=''
  obj.focus()
}

function allow_numeric(obj){
 if (/[^0-9]/i.test(obj.value))
  obj.value=obj.value.replace(/[^0-9]/g,'')
  obj.value+=''
  obj.focus()
}

function allow_alphaNumeric(obj){
 if (/[^\w]/i.test(obj.value))
  obj.value=obj.value.replace(/[^\w]/gi,'')
  obj.value+=''
  obj.focus()
}
</script>

<p><input type="text" onkeyup="allow_alpha(this);" / size="20">alpha</p>
<p><input type="text" onkeyup="allow_numeric(this);" / size="20">numeric</p>
<p><input type="text" onkeyup="allow_alphaNumeric(this);" / size="20">alpha numeric</p>
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 32

Expert Comment

by:Batalf
ID: 13596647
You should also have an onblur function which strips out illegal characters that might have been pasted into the text field:


<html>
<head>
<script type="text/javascript">
var pattern = /[^\dA-Z]/i;      // Disallowed characters
function alpha(e) {
      var k;
      document.all ? k = e.keyCode : k = e.which;
      var char = String.fromCharCode(k);
      if(char.match(pattern))return false;      
      return true;
}
function stripChars(obj){ // Strips out illegal characters from the text field
      var theValue = obj.value;
      theValue = theValue.replace(pattern,'');
      obj.value = theValue;
      
}

</script>
</head>
<body>
<div>
<form id="example" action="javascript://">
<input type="text" id="myTextField" onkeypress="return alpha(event)" onblur="stripChars(this)">
</form>
</div>
</body>
</html>
0
 

Author Comment

by:MaybeItsJeremy
ID: 13596673
@ GwynforWeb, exactly what I was looking for. Thanks.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13597592
thx for the points :-)
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

765 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