Replace Method Problem

[Err]

hey, I'm working on a script where I'm preventing the user from typing in certain characters. I'm using the replace() method with RegEx, but it doesn't seem to be working for me. I think I missed something, but I don't know what. Here is my code:

function checkChars() {  var txt = document.getElementById("txt").value;  if (txt != null) {	txt = txt.replace(/[^a-zA-Z0-9]/g, "");  }}

<input type="text" id="txt" name="text_search" onkeyup="checkChars();" value="" />

When I type characters that are not allowed in the text box, it will not remove anything. Script error console says there are no errors or warnings at any time. Any suggestions?

Edited August 8, 2009 by RahXephon

[Err]

I swear, it's the small things that take the longest to figure out. I managed to get it working, I just needed to move ".value" out of the var decloration, and into the variables after it. Works great.

function checkChars() {  var txt = document.getElementById("txt");  txt.value = txt.value.replace(/[^a-zA-Z0-9]/g, "");}

[chibineku]

*takes note*Always worth remembering ideas like that, so elegantly implemented. Never know when they'll come in handy...I was trying to come up with a way, and managed to create a text box that deleted anything at all you typed in it. Fun to watch!

[Err]

*takes note*Always worth remembering ideas like that, so elegantly implemented. Never know when they'll come in handy...I was trying to come up with a way, and managed to create a text box that deleted anything at all you typed in it. Fun to watch!

Ahh, yes it is. Glad someone else found this an interesting gem. I was looking online and everyone else's was so complicated, I don't know why people make it so hard. With 15+ lines of code just to do this, jeez.

[chibineku]

I am always after fluidity and to that end am trying to adapt this function so that it will check whatever input I call it from. I have tried various ways of implementing this, including passing it the parameter this.form (all my fields are in forms, so..), and then for and while looping through the form's elements, but I can't find a neat way of incorporating it. Any thoughts? Flexible as possible. I've also tried calling it onchange and cycling through all the input fields in the form and their value attributes, but nothing. I get no FF errors, so the syntax is okay.

[jeffman]

@chibinekuYou're aware that for text inputs and areas, a change event occurs only when the focus is removed from the element (ie, when the user clicks elsewhere or tabs away) ? If you want to capture one character, you have to grab each keystroke. Be sure also to note the difference between keydown, keypress, and keyup.

[Err]

I am always after fluidity and to that end am trying to adapt this function so that it will check whatever input I call it from. I have tried various ways of implementing this, including passing it the parameter this.form (all my fields are in forms, so..), and then for and while looping through the form's elements, but I can't find a neat way of incorporating it. Any thoughts? Flexible as possible. I've also tried calling it onchange and cycling through all the input fields in the form and their value attributes, but nothing. I get no FF errors, so the syntax is okay.

If I'm understanding this correctly, your aiming to target several fields at once using a loop.Here, try this script:

<form action="" name="forms">  <div><input type="text" /></div>  <div><input type="text" /></div>  <div><input type="text" /></div>  <div><input type="button" value="Submit" onclick="checkChars();" /></div></form>

function checkChars() {  for (var i = 0; i < document.forms.length; i++) {	var txt = document.forms[i];	txt.value = txt.value.replace(/[^a-zA-Z0-9]/g, "");  }}

Not really XHTML strict, but it still does what you may want.

Edited August 15, 2009 by RahXephon

[chibineku]

Thanks guys...I wasn't aware of that distinction in onchange...I will maybe try onmouseup. I would try it your way, rahX, but I want to change the regex for the email address.Thanks

[chibineku]

I want to allow the backspace as well and I know that the character code is [\b], but if I embed that inside the original regex, making [^a-zA-Z0-9 -[^\b]], it doesn't work, and if I put the [\b] after the closing square bracket and add ^ then it does funny things, and if I just put \b, that matches something else. Any ideas?

[Ingolme]

I want to allow the backspace as well and I know that the character code is [\b], but if I embed that inside the original regex, making [^a-zA-Z0-9 -[^\b]], it doesn't work, and if I put the [\b] after the closing square bracket and add ^ then it does funny things, and if I just put \b, that matches something else. Any ideas?

In Regular Expressions, "\b" refers to a word boundary, not a backspace. You don't need to worry about backspaces, they don't actually put a character in the box, so they will be permitted by that script to begin with.

[jeffman]

In Regular Expressions, "\b" refers to a word boundary, not a backspace. You don't need to worry about backspaces, they don't actually put a character in the box, so they will be permitted by that script to begin with.

That's what I thought, so I looked it up. Turns out that when \b is enclosed by brackets [ ] it does refer to a backspace. I'm not sure how you'd get such a character, unless you were deliberately using it as a control character. I use non-printing characters sometimes when I want special delimiters in a flat file. It's more efficient and idiot-proof than using improbable sequences like +++ .

[Synook]

You could capture the backspace keyCode instead, when they try to enter it.

[chibineku]

I've since discovered that I don't need it at all - on one browser it looked like when I tried to backspace it wasn't letting me, but it hasn't happened again, actually...strange. Thanks anyway, it's worth thinking about these things.