asked on

Javascript: how do i if user is typing in HTMLInputElement or HTMLTextArea

I want to know how to check if a user is using an Input box, i have some code that runs when a user presses a key but i dont want it to run if the user is using a text area or a input text box i have an off and on switch in my code lock(state) if lock is active my code wont run but how do i get a text box to active lock(true) when they are in it and lock(false) when they are not in it

MikeRCWatts

You could detect the id of the elemtn reciving the keypress, or the tagName if that's what you need.

Something like this in your keypress event:

function igkey(evt)
{
  if(evt==null) evt=window.event;
									//what element are we on?
  var o = (evt.target) ? evt.target : evt.srcElement;
 
  if (o.tagNametoLowerCase()=='input') { //do one thing...

Open in new window

MikeRCWatts

Missed the dot: if (o.tagName.toLowerCase()=='input') { //do one thing...

barkermn01

ASKER

Sorry mate its not working this is my complete code

But it is not running the movement.checkKeycode(evt);

function movement() {}
 
var movment = new movement();
 
movement.address = 'http://gridlock.imleeds.com/';
movement.s = true;
 
movement.checkKeycode = function(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
if(keycode == 87 || keycode == 38 || keycode == 50) movement.up();
if(keycode == 83 || keycode == 40 || keycode == 56) movement.down();
if(keycode == 68 || keycode == 39 || keycode == 52) movement.right();
if(keycode == 65 || keycode == 37 || keycode == 54) movement.left();
}
 
movment.lock = function(state){
  if(state == true){
    movement.s = false;
  }else{
    movement.s = true;
  }
}
 
movement.up = function(){
  if(movement.s == true) document.location = movement.address + "move/up";
}
 
movement.down = function(){
  if(movement.s == true) document.location = movement.address + "move/down";
}
 
movement.right = function(){
  if(movement.s == true) document.location = movement.address + "move/right";
}
 
movement.left = function(){
  if(movement.s == true) document.location = movement.address + "move/left";
}
 
movement.check = function(evt)
{
  if(evt==null) evt=window.event;
                                                                        //what element are we on?
  var o = (evt.target) ? evt.target : evt.srcElement;
 
  if (o.tagName.toLowerCase() !='input' || o.tagName.toLowerCase() !='textarea') { 
    movement.checkKeycode(evt);
  }
}
 
document.onKeyDown = movement.check;

Open in new window

MikeRCWatts

Here is an example showing the switching on tagname.

Im not sure your key event handler is getting attached at all.

Also, o.tagName.toLowerCase() !='input' || o.tagName.toLowerCase() !='textarea') || probably wants to be &&.

Hope this helps ...

<html>
<head>
<script language=javascript>
 
function movement() {}
 
var movement = new movement();
 
 
movement.check = function(evt)
{
  if(evt==null) evt=window.event;
                                                                        //what element are we on?
  var o = (evt.target) ? evt.target : evt.srcElement;
 
  if (o.tagName.toLowerCase() !='input' && o.tagName.toLowerCase() !='textarea') {
    alert('key not in input or text');
    }
  else {
    alert('key in input or text');
    }
 
}
</script>
</head>
<body onkeydown="movement.check();">
 
<input id=i value='this is an input'>
<textarea id=t value='a text area'></textarea>
 
<select><option>a select</option></select>
 
 
</body>
</html>

Open in new window

barkermn01

ASKER

&& means and this it cant be both and input and text area it has to be or ||

MikeRCWatts

Yes, it will always be either not input or not textarea type [or not both]

so o.tagName.toLowerCase() !='input' || o.tagName.toLowerCase() !='textarea' will always be true

..sorry if I'm confusing myself or anyone..

barkermn01

ASKER

Ok thy dose that not work in my script

<html>
<head>
<script type="text/javascript">
function movement() {}
 
var movment = new movement();
 
movement.address = 'http://gridlock.imleeds.com/';
movement.s = true;
 
movement.checkKeycode = function(evt) {
  var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (evt) keycode = evt.which;
    if(keycode == 87 || keycode == 38 || keycode == 50) movement.up();
    if(keycode == 83 || keycode == 40 || keycode == 56) movement.down();
    if(keycode == 68 || keycode == 39 || keycode == 52) movement.right();
    if(keycode == 65 || keycode == 37 || keycode == 54) movement.left();
  }
}
 
movment.lock = function(state){
  if(state == true){
    movement.s = false;
  }else{
    movement.s = true;
  }
}
 
movement.check = function(evt)
{
  if(evt==null) evt=window.event;
  //what element are we on?
  var o = (evt.target) ? evt.target : evt.srcElement;
 
  if (o.tagName.toLowerCase() !='input' && o.tagName.toLowerCase() !='textarea') {
    alert('key not in input or text');
    }
  else {
    alert('key in input or text');
    }
 
}
 
movement.up = function(){
  if(movement.s == true) document.location = movement.address + "move/up";
}
 
movement.down = function(){
  if(movement.s == true) document.location = movement.address + "move/down";
}
 
movement.right = function(){
  if(movement.s == true) document.location = movement.address + "move/right";
}
 
movement.left = function(){
  if(movement.s == true) document.location = movement.address + "move/left";
}
 
//document.body.onKeyDown = "movement.checkKeycode;";
 
</script>
</head>
<body onkeydown="movement.check();">
 
<input id=i value='this is an input'>
<textarea id=t value='a text area'></textarea>
 
<select><option>a select</option></select>
 
 
</body>
</html>

Open in new window

MikeRCWatts

Sorry I don't understand 'Ok thy dose that not work in my script'

In the script above, if you remove the extra } on line 19 then the alert messages will tell you which whether you're on an (input or textarea) or something else OK in IE. In Firefox you need to pass the event to keydown as below (which also works in IE). I'm not sure what the rest of your code is intended to do, sorry....but one thing at a time, that detects the tag OK.

<html>
<head>
<script type="text/javascript">
function movement() {}
 
var movment = new movement();
 
movement.check = function(evt)
{
  if(evt==null) evt=window.event;
  //what element are we on?
  var o = (evt.target) ? evt.target : evt.srcElement;
 
  if (o.tagName.toLowerCase() !='input' && o.tagName.toLowerCase() !='textarea') {
    alert('key not in input or text');
    }
  else {
    alert('key in input or text');
    }
 
}
 
 
</script>
</head>
<body onkeydown="movement.check(event);">
 
<input id=i value='this is an input'>
<textarea id=t value='a text area'></textarea>
 
<select><option>a select</option></select>
 
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

MikeRCWatts

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

barkermn01

ASKER

Thanks for that works greate