views:

98

answers:

4

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 ;-)

A: 

http://www.htmlcodetutorial.com/forms/_INPUT_DISABLED.html

If your inputs have disabled="disabled" attribute you won't be able to change their value.

Tomasz Kowalczyk
+3  A: 

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.

Andy E
oh nooo! yes this is the problem. is there a way to just add functionality to the event-trigger by not overwriting it?
helle
@helle: there's a couple of options available to you, I updated my answer with more information.
Andy E
thanks for your help, man!
helle
+2  A: 

I've been struggling with the same problem a while ago. I was using the jquery.layout plugin in a modal jquery-ui dialog and I couldn't access any of the fields in it.

It appeared to be a z-index problem (some div was over my input fields, so I couldn't click them). You should check it out and try changing the z-index value of your input fields.

Bertrand Marron
Or make it non-transparent to see where it overlaps
mplungjan
A: 

When you say

and nope, they don't have attributes: disabled="diesbled" 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

Tim B James