0

I'm trying to prevent user from inserting * in a textbox.
This is what I was trying to do, but here it only detects * if this is the only inserted character. For example texts like: *, etc.
When allowed characters are mixed with *, then it cannot detect it. For example inputs such as: *hjh, etc..
and maybe how to make it replace only * with "" and not the whole field?

<script type="text/javascript"> function testField(field) { var regExpr = new RegExp("[^*]"); if(!regExpr.test(field.value)) { field.value = ""; } } </script> <input type="text" id="searchGamesKeyword" class="searchGamesTextBox" name="searchGamesKeyword" onblur="testField(this);" />
Improve this question
8
  • 2
    use keyup event and check keycode. Commented Jun 21, 2012 at 2:50
  • Please don't use new RegExp with a static string. JavaScript offers RegExp literals, which are better in a lot of ways. var regExpr = /[^*]/; Commented Jun 21, 2012 at 2:51
  • Also, please don't try to cancel this dynamically; just show a message beside the field. It's difficult to get selections right in this case, and it's just generally annoying when typing stuff doesn't work. (Although selections aren't an issue right now, I think clearing the entire textbox after the user inserts one wrong character is a little more annoying.) Commented Jun 21, 2012 at 2:52
  • @minitech: heh, nice catch. :) Commented Jun 21, 2012 at 2:54
  • don't use regex for this. it's way better to check for the keycode on the keyup event as @OZ_ said Commented Jun 21, 2012 at 2:55

4 Answers 4

Reset to default
2

You forgot to anchor your regexp to the start and end of the string: new RegExp("[^*]")

Try this: var regExpr = /^[^*]*$/ -- it asks for zero or more instances of any character except * anchored at the start and end of the string. Maybe /^[^*]+$/ would be better (note +) if you want to force one or more instances of any character except *.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I updated my post with minitech's advice to use RegExp literals -- thanks @minitech.
1

How about this:

function testField(field) { field.value = field.value.replace(/\*/g,""); }

Called from onblur=testField(this) as shown in the question it will take the current value of the field and replace any and all asterisks with an empty string, leaving all other characters untouched. So, e.g., "ab*cde*" would become "abcde".

The g on the end of /\*/g is a flag meaning to match globally - without this flag it would just replace the first match.

The reason your code didn't work is that your regex of [^*] will match (i.e., return true from .test()) if there is a non-asterisk character anywhere in the string.

Improve this answer

Comments

1 
<script type="text/javascript"> function testField(field, event) { if (event.charCode == 42) { event.preventDefault(); } } </script> <input type="text" id="searchGamesKeyword" class="searchGamesTextBox" name="searchGamesKeyword" onkeypress="javascript:testField(this, event);" />​
Improve this answer

9 Comments

And here comes the selections problem I mentioned. If the user is typing somewhere in the middle of the field, the cursor will keep jumping to the end. Not a good experience.
oh I see what you mean, hm, you will need to capture the keypress and preventDefault(), see stackoverflow.com/questions/1421562/…
Unrelatedly: you don't need both the escape and the character class. Just use /\*/g.
Yup - and once you handle the key events, then you get the problem with the user copying and pasting the invalid characters in. It's a lose-lose-lose situation.
Good point, though you could always filter those out on the back end. I updated my answer anyhow.
|
0

This should prevent people typing * and copy and pasting it to. Remember to check on the back-end to, because people may have JS disabled in their browsers.

Javascript:

function testField(f) { var o='',i,v=f.value; for(i=0;i<v.length;i++) if(v[i]!='*')o+=v[i]; f.value=o; }

HTML:

<input type="text" id="searchGamesKeyword" class="searchGamesTextBox" name="searchGamesKeyword" onkeyup="testField(this);" onchange="testField(this);" />

DEMO: http://jsfiddle.net/martinschaer/Sbg6w/ (manually optimized and minified ;))

EDIT: Using a flag (c) you can avoid having the caret positioned at the end if you try to edit what you've typed so far. Like this:

function testField(f) { var t,c,i=0,o='',x="value",v=f[x],l=v.length; while(i<l){t=v[i++];if(t!='*')o+=t;else c=1} if(c)f[x]=o }

​Test it here: http://jsfiddle.net/martinschaer/Sbg6w/

Improve this answer

2 Comments

I wouldn't do that on keyup (or any key event) because updating the .value will tend to move the cursor to the end of the field, making it very tedious to edit an existing value. (You could add a separate keyup handler to prevent that character being entered, with your current function from onchange or onblur taking care of any pasted changes.)
@nnnnnn and how about adding a flag to update f.value only if an * has being detected? that would eliminate the problem when trying to edit a value. I insisted to do this onkeyup too so the user gets that * are not allowed, instead of making them disappear when he finished typing... for me your solution is more than fair enough :P

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.