/    Sign up×
Community /Pin to ProfileBookmark

Autotab and block key press js functions don’t work together

Copy linkTweet thisAlerts:
May 31.2007

I’m using two javascripts I found to create a form that blocks certain characters from being entered into a field using onKeypress AND autotabs using onKeyup to the next field when maxlength is reached. The scripts I’ve found for these functions work separately but they don’t work together in the same input tag. Is there a way to make this work? The form I’m using for testing is [URL=”http://www.kevinjbrennan.com/staging/restrict_fields3.htm”]here[/URL].

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@DocRocksauthorJun 01.2007 — I see more than 50 forum members have viewed this one - does anyone have an idea on how to do it? I have tried onkeyup and on onkeypress event handlers but can't make the text blocker and the autotab work together on the same form text element. You help would really be appreciated.

html follows:

<input name="alphabet" type='text' maxlength="6" onkeyup='this.value=this.value.replace(/[^0-9,a-z]/ig,"")' onkeypress="autotab(this, document.restrict.numbers)" />

javascript follows:

Comment = false;

Email = false;

PostalCode = false;

function Go(){

document.onkeypress = keyDown;

if (n) {

document.captureEvents(Event.KEYPRESS);

}

function keyDown(e) {

var keycode;

if (window.event) keycode = window.event.keyCode;

else if (e) keycode = e.which;

else return true;

if (Comment) {

if ((keycode > 32 && keycode < 48) || (keycode > 57 && keycode < 65) || (keycode > 90 && keycode < 97))

{

return false;

}

}

else if (Email) {

if (keycode==34 || keycode==39)

{

return false;

}

}

else if (PostalCode) {

if (keycode < 45 || keycode > 57)
{
return false;
}
}

//else return true;

}

</script>
Copy linkTweet thisAlerts:
@CrazyMerlinJun 01.2007 — the script was simply badly formatted and so the missing "}" was not obvious.

this is how it should be:
<i>
</i>&lt;script language="javascript" type="text/javascript"&gt;
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
ie = (document.all) ? 1 : 0;
n = !ie;
Comment = false;
Email = false;
PostalCode = false;


function Go()
{
document.onkeypress = keyDown;
if(n)
{
document.captureEvents(Event.KEYPRESS);
}
}

function keyDown(e)
{
var keycode;
if (window.event)
{
keycode = window.event.keyCode;
}
else if(e)
{
keycode = e.which;
}
else
{
return true;
}

<i> </i>if(Comment)
<i> </i>{
<i> </i> if ((keycode &gt; 32 &amp;&amp; keycode &lt; 48) || (keycode &gt; 57 &amp;&amp; keycode &lt; 65) || (keycode &gt; 90 &amp;&amp; keycode &lt; 97))
<i> </i> {
<i> </i> return false;
<i> </i> }
<i> </i>}
<i> </i>else if (Email)
<i> </i>{
<i> </i> if (keycode==34 || keycode==39)
<i> </i> {
<i> </i> return false;
<i> </i> }
<i> </i>}
<i> </i>else if (PostalCode)
<i> </i>{
<i> </i> if (keycode &lt; 45 || keycode &gt; 57)
<i> </i> {
<i> </i> return false;
<i> </i> }
<i> </i>}
//else return true;
}


I tested and it works fine like that in your test page.

On another note, you are using a DOCTYPE which expects the code to be in XHTML format, but it is not.

<br> is not valid in XHTML because it has no closing </br>

same with the input tag.

to get around this convert your tags to self-closing tags, like <br />

Further more, in XHTML all attribute properties must be enclosed in quotes.

size=10 in a tag is not allowed. It must be size="10"

And finally, all attributes must be lowercase.

So: onKeyPress is not allowed, it must be onkeypress.

Keep the DOCTYPE and be more observant, or switch the doctype to loose.dtd and become stricter at your own pace.

Hope that helps,

//erlin!
Copy linkTweet thisAlerts:
@DocRocksauthorJun 01.2007 — Merlin - many thanks for your more than thorough parsing of the script and my xhtml confusion.

I'll give it a go.
Copy linkTweet thisAlerts:
@DocRocksauthorJun 03.2007 — Thanks to Merlin for catching the syntax errors. I'm blocking text entries and autotabbing in a small test form link here and it works fine.

I then cut and paste the same js syntax into the first text box in my full form (First Name) link here and it does not work. I have gone over this code many times and don't see why it shouldn't work in the full form and would appreciate very much a fresh pair or more experienced pair of eyes to look at it.
Copy linkTweet thisAlerts:
@DocRocksauthorJun 06.2007 — Thanks to Merlin for catching the syntax errors. I'm blocking text entries and autotabbing in a small test form link here and it works fine.

I then cut and paste the same js syntax into the first text box in my full form (First Name) link here and it does not work. I have gone over this code many times and don't see why it shouldn't work in the full form and would appreciate very much a fresh pair or more experienced pair of eyes to look at it.[/QUOTE]

Found my coding error. Thanks again to Merlin for getting me on the right track.
×

Success!

Help @DocRocks spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...