Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML input fields does not get focus when clicked

I have a problem and I can't figure out what exactly is causing this behavior. I cannot access my input fields and textareas on my HTML form.

Unfortunately, the JS, HTML and CSS are very large, so I can't really post it all here.

Can anybody tell me what to look for when debugging this strange behavior?

UPDATE

If I move the cursor over the input field I can see the text cursor, but when I click it the field does not get the focus. I can access the field via pressing the Tab key and if I right click on it and then click on the field I also get the focus for it.

...and nope, they don't have the disabled or readonly attributes ;-)

like image 760
helle Avatar asked Sep 16 '10 07:09

helle


People also ask

How do I turn on autofocus in HTML?

The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.

How do you set focus on input field?

To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.

How do you know if input field is in focus?

To check if an input field has focus with JavaScript, we can use the document. activeElement property to get the element in focus. to add an input. to check if the input element is focused.


1 Answers

when i click it the field does not get the focus. i can access the field via pressing the "tab-key"

It sounds like you've cancelled the default action for the mousedown event. Search through your HTML and JS for onmousedown handlers and look for a line that reads.

return false; 

This line may be stopping you from focusing by clicking.


Re: your comment, I'm assuming you can't edit the code that adds this handler? If you can, the simplest solution is to just remove the return false; statement.

is there a way to just add functionality to the event-trigger by not overwriting it?

That depends on how the handler is attached. If it's attached using the traditional registration method, e.g. element.onmousedown, then you could create a wrapper for it:

var oldFunc = element.onmousedown; element.onmousedown = function (evt) {     oldFunc.call(this, evt || window.event); } 

Since this "wrapper" doesn't return false, it will not cancel the default action (focusing) for the element. If your event is attached using an advanced registration method, such as addEventListener or attachEvent then you could only remove the event handler using the function name/reference and reattach it with a wrapped function similar to the above. If it's an anonymous function that's added and you can't get a reference to it, then the only solution would be to attach another event handler and focus the element manually using the element.focus() method.

like image 158
Andy E Avatar answered Sep 26 '22 04:09

Andy E