HTML input fields does not get focus when clicked

Question

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.

Unfortun

Answer 1

I had the similar issue - could not figure out what was the reason, but I fixed it using following code. Somehow it could not focus only the blank inputs:

$('input').click(function () {
        var val = $(this).val();
        if (val == "") {
            this.select();
        }
    });

Answer 2

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.

Answer 3

I had this problem too. I used the disableSelection() method of jQuery UI on a parent DIV which contained my input fields. In Chrome the input fields were not affected but in Firefox the inputs (and textareas as well) did not get focused on clicking. The strange thing here was, that the click event on these inputs worked.

The solution was to remove the disableSelection() method for the parent DIV.

Answer 4

If you are faced this problem while using canvas with DOM on mobile devices, the answer of Ashwin G worked for me perfectly, but I did it through javascript

var element = document.getElementById("myinputfield");
element.onclick = element.select();

After, everything worked flawlessly.

Answer 5

When you say

and nope, they don't have attributes: disabled="disabled" or readonly ;-)

Is this through viewing your html, the source code of the page, or the DOM?

If you inspect the DOM with Chrome or Firefox, then you will be able to see any attributes added to the input fields through javasript, or even an overlaying div

Answer 6

Use the onclick="this.select()" attribute for the input tag.