Check if focus is on a textfield_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-18 08:12 出处：网络

I\'m using the arrows to let people 开发者_Python百科move around on my website. I don\'t want this functionality to be there when you\'re trying to write in a form field. How can i check if one of my

相关专题：javascript

I'm using the arrows to let people 开发者_Python百科move around on my website. I don't want this functionality to be there when you're trying to write in a form field. How can i check if one of my text fields is focused?

I think if the focus is in a textbox, the web browser disables moving around the page with arrow keys by default. No extra code is necessary.

I've used document.activeElement.tagName to get the tagName of the element that has focus, it will return as 'TEXTAREA', 'INPUT', etc.

As far as I know and tested, it works in all modern browsers.

To tell if one of your text fields is focused, add onfocus and onblur handlers to the text fields you want to watch and handle state changes in the onfocus handler. For example,

<script>
var textFieldInFocus;
function handleOnFocus(form_element)
{
   textFieldInFocus = form_element;
}
function handleOnBlur()
{
   textFieldInFocus = null;
}
</script>
<form>
  <input type="text" name="text1" onfocus="handleOnFocus(this)" onblur="handleOnBlur()"/>
  <input type="text" name="text2"/>
  <textarea name="textarea1" onfocus="handleOnFocus(this)" onblur="handleOnBlur()"></textarea>
</form>

Given the above code, you can have other JS code check textFieldInFocus to see if it is defined (a text field is currently focused) and the value will be the text field form element in focus. For example,

if(textFieldInFocus)
{
    alert("The textField that was currently focused is " + textFieldInFocus);
}

A shorter, easier way to add onfocus and onblur handlers would be to use jQuery, but since no mention was made, I wrote for a small, simple implementation.

Also, be careful when altering the default behavior of keyboard and mouse events as you can hamper accessibility devices that rely on behavior you yourself may not be able to test with.

Trap whichever keyboard event(s) you're using at the document/body level, and then use the event's target property to determine whether the event applied to a textarea or input (or any other control you want to exclude) and only do your site navigation stuff when appropriate.

It's been a while since I tried to write event handling code that cares about event properties without using JQuery to do all the cross-browser compatibility, so the following might be slightly wrong but should give you enough to go on to work out the rest yourself. Google is your friend. (But I strongly recommend using a library (JQuery or other) to normalise the event handling for the various browsers.) Anyway, from memory IE's event property uses srcElement and others use target(?) to give you a reference to the element that the event applied to. So, having said that, I suggest something like this:

<body onkeyup="return someHandler();">

<script>

function someHandler(e) {
  if (!e)
    e = window.event;
  var elTarget = e.target ? e.target : e.srcElement;
  var elType = elTarget.tagName;
  if (elType != "textarea"
     && elType != "input"
     // && elType != "etc") {

     // do something

  }
}

</script>