Forum Moderators: open

Message Too Old, No Replies

How to detect an element as INPUT

Elelements on a page.

         

truonglu

7:59 pm on Apr 30, 2007 (gmt 0)

10+ Year Member



I would like to loop thru all elements on a page and determine whether it is an INPUT, TEXT AREA thru Javascript. Can you show me a sample code if you know how?

Thanks...

Dabrowski

8:04 pm on Apr 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



var inputTags = document.getElementsByTagName( "INPUT");
var textareaTags = document.getElementsByTagName( "TEXTAREA");

That will search for the objects on the page.

truonglu

8:31 pm on Apr 30, 2007 (gmt 0)

10+ Year Member



I am able to disable the Backspace not to go back to previous page from Javascript, but it also disable the Backspace in an INPUT/TEXTAREA element when firing the onkeydown event from the BODY tag. I would like to disable this key only when it is not either an INPUT nor TEXTAREA.

Dabrowski

8:39 pm on Apr 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ok, so rewording your question slightly...

You want to diable the backspace key, except typing in a text field.

Well, certainly you can detect the use of it, but I don't know if you can stop it going back a page. You understand though that the user can still press the back button?

If this is ok, I'll see if I can make a quick test page.

truonglu

4:47 pm on May 1, 2007 (gmt 0)

10+ Year Member



You are right. This is what I am after.

Dabrowski

5:35 pm on May 1, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is a stripped version of some other code, it should work. I'm sure you can work it into whatever other code you have.

Note improper representation of ¦ character!

function keyPressed( evt) {
var e = evt ¦¦ event;
var key = e.which ¦¦ e.keyCode;
var ret = true;

if( key == 8) ret = false;

return ret;
}

function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)
var ret = 0;

if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
else
elm['on' + evType] = fn;

return ret;
}

addEvent( document, "keydown", keyPressed);

truonglu

7:04 pm on May 7, 2007 (gmt 0)

10+ Year Member



I am not familiar with the AddEvent.
Where should I put the
addEvent(document, "keydown", keyPressed);
in the html file?

Thanks...

Dabrowski

8:32 am on May 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No, the idea of using addEvent to trigger your code is that you have nothing, well, no JS anyway, in your HTML.

Copy that whole chunk of code above, stick it in a file called, for example, nobackspace.js

The name can be anything you like but has to have the extention js for Javascript.

The in your HTML, put this line in your <head>:

<script type='text/javascript' src='nobackspace.js'></script>

The src property is a relative file path, works the same way as your <img> tags.

When the browser finds that line, it'll download the script, and execute it immediately. Now, as everything we have is in functions, the only line that will be executed is the addEvent line at the bottom. This will call the addEvent function which attaches the keyPressed function to the onKeyDown event on document.

You see then it works automatically, without any need for any script in your html. This script is a bit of an anomoly, normally you'd begin with an onLoad event that runs an init funtion. This init function would then look up other elements, and assign events to them.

That code will work fine, but I haven't tested it with the input boxes. It may disable the backspace in here too, but you said you already had the code to correct this, so just work it into that little script.

Hope you understand how it works now!

Just ask if you need more info.

truonglu

12:43 pm on May 8, 2007 (gmt 0)

10+ Year Member



Yes, the Javascript gets executed by adding the reference as a script tag.
Is there anyway to add exception so the user still can do back space if the cursor is in the INPUT or TEXTAREA fields?

Dabrowski

12:58 pm on May 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, you need to add an initalize function, that's called with window onLoad. You can do this with the addEvent function again.

The init function then needs to find all INPUT/TEXTAREA fields using getElementsByTagName, and add an onfocus/onblur events again using addEvent. These events will call simple functions that set a flag (called bkspEnabled in this example) which the keyPressed function can check for, and return true instead.

Your enable/disable functions would be:

function bkspEnable() { bkspEnabled = true; }

function bkspDisable() { bkspEnabled = false; }

Your keyPressed function would have this line at the start of the function:

if( bkspEnabled) return true;

You see how that works?

truonglu

5:04 pm on May 8, 2007 (gmt 0)

10+ Year Member



Here is my js file, I am trying to find and loop thru all "INPUT" tags and set each tag with onBlur and onFocus event, but it return with zero entry found.
Am I missing something?

Thanks...

function keyPressed( evt) {
var e = evt ¦¦ event;
var key = e.which ¦¦ e.keyCode;
var ret = true;
if(bkspEnabled) return true;
if(key==8) ret = false;
return ret;
}

function addEvent(elm, evType, fn, useCapture) {
//Credit: Function written by Scott Andrews
//(slightly modified)
var ret = 0;

if (elm.addEventListener) ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent) ret = elm.attachEvent('on' + evType, fn);
else elm['on' + evType] = fn;
return ret;
}

function bkspEnable() {
bkspEnabled = true;
}

function bkspDisable() {
bkspEnabled = false;
}

function init() {
var dlist = document.getElementsByTagName('INPUT');
alert('perform init()=' + dlist.length);
for( var i = 0; i < dlist.length; i++ ) {
alert(i);
dlist.item(i).onFocus=bkspEnable();
dlist.item(i).onBlur=bkspDisable();
}
}

addEvent(document, "keydown", keyPressed);
init();

Dabrowski

5:38 pm on May 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's almost right, you're still doing it old-school!

Tweak it a bit....

function init() {
var dlist = document.getElementsByTagName('INPUT');
alert('perform init()=' + dlist.length);
for( var i = 0; i < dlist.length; i++ ) {
alert(i);
addEvent( dlist[i], "focus", bkspEnable);
addEvent( dlist[i], "blur", bkspDisable);
}
}

addEvent(document, "keydown", keyPressed);
addEvent(window, "load", init);

By calling init() at the bottom of your script, the function was running straight away - before the browser had loaded the HTML with the <input> tags, so it was correct at the time of execution.

I've used addEvent to trigger the init function when the page has loaded, same as doing

<body onLoad='init()'>
.

I've also changed your loop to assign the events by using addEvent. The importance of this is that the addEvent won't overwrite another event already assigned to the element. Whereas

elm.onFocus = this();
will stop other functions attached to the focus event from running.

truonglu

6:41 pm on May 8, 2007 (gmt 0)

10+ Year Member



It works.

Thanks...

Dabrowski

9:30 pm on May 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



np