• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 781
  • Last Modified:

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
0
barkermn01
Asked:
barkermn01
  • 6
  • 4
1 Solution
 
MikeRCWattsCommented:
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

0
 
MikeRCWattsCommented:
Missed the dot:  if (o.tagName.toLowerCase()=='input') { //do one thing...
0
 
barkermn01Author Commented:
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

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
MikeRCWattsCommented:
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

0
 
barkermn01Author Commented:
&& means and this it cant be both and input and text area it has to be or ||
0
 
MikeRCWattsCommented:
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..
0
 
barkermn01Author Commented:
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

0
 
MikeRCWattsCommented:
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

0
 
MikeRCWattsCommented:
And your code would look something like:
<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') {
 
    movement.checkKeycode(evt);
//    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(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

0
 
barkermn01Author Commented:
Thanks for that works greate
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now