2

I'm using the arrows to let people 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?

Jocke
  • 89
  • 2
  • 7
  • That is not a good idea. The default behaviour is to navigate using the tab key, then navigate within controls using the cursor keys. If you change that behaviour, you are just making life more difficult for your users. Re-writing a UI using javascript is a bad idea. – RobG Jul 08 '11 at 00:30
  • If you want to see the issues with using *blur* and *focus* events to track which element has focus, try the [blur and focus compatability table](http://www.quirksmode.org/dom/events/blurfocus.html) on quirksmode. – RobG Jul 08 '11 at 00:56
  • Duplicate of https://stackoverflow.com/questions/4575266/find-if-a-textbox-is-currently-selected – Ely Apr 08 '18 at 09:41

4 Answers4

3

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.

bool.dev
  • 17,508
  • 5
  • 69
  • 93
Total Legend
  • 51
  • 2
  • 3
3

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.

N0ug4t
  • 191
  • 1
  • 12
  • Exactly! Try it in the answer textarea box below: set the cursor into it and then try to move it out again with arrow keys. It does not work! – powtac Jul 07 '11 at 23:36
  • @powtac The default functionality of arrow keys doesn't work (moving the page around), but the OP is implementing custom functionality which will still execute even if a textarea is focused. – Šime Vidas Jul 07 '11 at 23:39
  • @powtac Original poster. The person who asked the question. – Šime Vidas Jul 07 '11 at 23:46
  • @powtac - OP is Original Post(er). But I agree with you that from the brief description given it sounds like default browser functionality will do this - at least in IE and some others, noting that Opera has its own wacky keyboard scheme going. – nnnnnn Jul 07 '11 at 23:48
  • So the "OP" aka @Jocke should ask this as a question and posting some code. ;) ... I supposed this already as well ... – powtac Jul 07 '11 at 23:48
  • @nnn *"I'm using the arrows to let people move around on my website."* - If the OP meant the default functionality of arrow keys, he wouldn't have mentioned it specifically. The implication here is that the OP is using some means of custom page navigation controlled by arrow keys implemented using keydown event handlers. Those handlers won't stop executing just because some field is focused. – Šime Vidas Jul 07 '11 at 23:56
  • @Šime Vidas - which goes back to the advice that implementing custom UI behaviour using javascript is a bad idea. There are just too many variables and different behaviours in different browsers to make it worth while. Users know their browsers, making them all behave as the developer wants (and different to all browsers) just doesn't make sense, even if it can be done consistently (and it generally can't). – RobG Jul 08 '11 at 00:34
  • @Šime Vidas - yep, I first read that as "...around my webpage", as in, a single page, then later realised it said "website". So I've posted an answer for that case. – nnnnnn Jul 08 '11 at 00:41
2

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.

mrk
  • 4,999
  • 3
  • 27
  • 42
0

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>
nnnnnn
  • 147,572
  • 30
  • 200
  • 241