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?
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?
Share Improve this question asked Jul 7, 2011 at 23:26 JockeJocke 812 silver badges7 bronze badges 3- 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 Commented Jul 8, 2011 at 0: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 patability table on quirksmode. – RobG Commented Jul 8, 2011 at 0:56
- Duplicate of stackoverflow./questions/4575266/… – Ely Commented Apr 8, 2018 at 9:41
4 Answers
Reset to default 3I 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 patibility, 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 remend 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>