Question

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?

Answer 1

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.