Capturing Keystrokes that are not permitted within a TextArea

[@sh]

Has anyone a function handy that I can apply to various textboxes within a
form, each textbox will permit most characters but I want to ban certain
characters from each textbox.

Therefore I need a function that I can put into the <text area> tag of each
box, something like...

<text area onKeyPress="BanCharacters('a','<','>','b','u','i');">

Is this possible easily?

Cheers!

 

[Randy Webb]

@sh said the following on 12/20/2005 6:41 AM:

Has anyone a function handy that I can apply to various textboxes within a
form, each textbox will permit most characters but I want to ban certain
characters from each textbox.

Therefore I need a function that I can put into the <text area> tag of each
box, something like...

<text area onKeyPress="BanCharacters('a','<','>','b','u','i');">

<textarea onkeypress="banCharacters(this,'character list here');
name="myTextArea1">

Then banCharacters could check the keystrokes and compare against the
list. If its in the list, return false.

Might be better to have an array or simple object for each textarea
predefined so that you don't have to worry about syntax or arguments
list length.

Even simpler/better would be an array/object that had a list of all of
them. Something like this:

var myList = new Object();
myList['myTextArea1'] = ['a','<','>','b','u','i']
myList['myTextArea2'] = ['<','>','b','u','i']
and so on.

function banCharacters(textAreaRef){
//myList[textAreaRef.name] will give you a reference to the list.
//loop through that list and compare to the keypress.
//return false if it matches
}

There is more work to it than that, but the approach is there. Write
your best try at it and post it back here.

 

[@sh]

There is more work to it than that, but the approach is there. Write your

best try at it and post it back here.

Thanks Randy, I'll give it a go ;o) I've got to finish the application
first so I'll get there, then go back and cleanup with the Javascript
verification bits like this.

Cheers,

 

[Christopher Benson-Manica]

var myList = new Object();
myList['myTextArea1'] = ['a','<','>','b','u','i']
myList['myTextArea2'] = ['<','>','b','u','i']

Is that somehow superior to

myList[ 'myTextArea1' ]='a<>bui';
myList[ 'myTextArea2' ]='a<>bui';

?

 

[Randy Webb]

Christopher Benson-Manica said the following on 12/20/2005 3:15 PM:

var myList = new Object();
myList['myTextArea1'] = ['a','<','>','b','u','i']
myList['myTextArea2'] = ['<','>','b','u','i']

Is that somehow superior to

myList[ 'myTextArea1' ]='a<>bui';
myList[ 'myTextArea2' ]='a<>bui';

In the sense that you would have to split and then loop through the
array whereas the first is already an array.

 

[Christopher Benson-Manica]

In the sense that you would have to split and then loop through the
array whereas the first is already an array.

I was thinking charAt(), obviating the need to split() first.

 

[Randy Webb]

Christopher Benson-Manica said the following on 12/20/2005 9:36 PM:

I was thinking charAt(), obviating the need to split() first.

Might be worth testing to see if using charAt is faster than the array
method. Off the top of my head, the array method should be faster.

 

[Christopher Benson-Manica]

Might be worth testing to see if using charAt is faster than the array
method. Off the top of my head, the array method should be faster.

You're probably right, although the string method is a little cleaner
IMHO. I doubt the performance difference would be noticable for most
applications.

 

[Randy Webb]

Jasen Betts said the following on 12/21/2005 2:16 PM:

I was thinking charAt(), obviating the need to split() first.

Mozilla allows somestring[index] as another way of expressing
somestring.charAt(index).

Opera nor IE follow that construct. I remember seeing that a while back
and never bothered with it because of lack of support in other browsers.

I don't know if that's standard or not, it's just something I've noticed.

"Standard" as in ECMA Standards, or, standard as in standard behavior?

The first is irrelevant, the second is no.

I haven't investigated the ways in which strings differ from arrays.

The difference in Strings and Arrays is very significant.

 

[bwucke]

Smart users will cut&paste their "illegal chars" using context menu,
this way keypress won't be triggered. Better use onChange. And then,
still testing the character at the end of textarea misses its purpose
as the user may paste a larger block of text or start editing in the
middle. Instead of arguing which one is faster, looping over string
chars or array element, I suggest fast system
onKeyUp="this.value=this.value.replace(/[f0rbIdden]/g,'')";

(yes, I write in Perl, why?)

 

[@sh]

Fair point but this application is secure anyway, the only reason we're
blocking these characters is because it makes the end result a bit tricker,
its not necessarily for security.

 

[@sh]

Might be worth testing to see if using charAt is faster than the array

method. Off the top of my head, the array method should be faster.

Interesting, just out of curiosity how on earth do you test the speed
difference between two methods when they both would execute so quickly
anyway? I suppose you set some counter method or something and then pop it
into an Alert?

 

[Lee]

@sh said:

Interesting, just out of curiosity how on earth do you test the speed
difference between two methods when they both would execute so quickly
anyway? I suppose you set some counter method or something and then pop it
into an Alert?

var count = BIGNUMBER;
var start = new Date();
while ( count --> 0 ) {
// do something that is very fast;
}
var finish = new Date();
alert( (finish.getTime() - start.getTime()) / BIGNUMBER );

 

[Kevin Darling]

Has anyone a function handy that I can apply to various textboxes within a
form, each textbox will permit most characters but I want to ban certain
characters from each textbox.

Therefore I need a function that I can put into the <text area> tag of each
box, something like...

<text area onKeyPress="BanCharacters('a','<','>','b','u','i');">

function onpress()
{
var sForbidden = "a<>bui";

var char = String.fromCharCode(event.keyCode);

if (sForbidden.indexOf(char) > -1)
{
event.returnValue = false;
}
}

Kev

 

[Randy Webb]

@sh said the following on 12/22/2005 9:39 AM:

Interesting, just out of curiosity how on earth do you test the speed
difference between two methods when they both would execute so quickly
anyway? I suppose you set some counter method or something and then pop it
into an Alert?

Perform 50,000 or so loops and time them.