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

Just in case someone else is looking for this answer, we had a similar problem and solved it by changing the z-index of the input tags. Apparently some other divs had extended too far and were overlapping the input boxes.

Answer 2

I know this is a very old thread, but this just happened to me recently; took me a while to figure it out.

This same issue can be caused by putting 'input' elements inside of pair of 'label' tags.

In my case, I had intended to create a pair of 'div' tags but instead I accidently created a pair of 'label' tags, then inserted some text input fields 'input type="text"..' using DOM.

It displayed normally on the screen, but when I clicked on any of the text fields, the cursor kept jumping back to the first 'input' and really acting erratic.

Took me a while to figure this out because this behavior is subtle, and not at all what I would have expected from making this kind of mistake.

bsnider

Answer 3

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.

Answer 4

I had this issue using Bootstrap + contact form 7. I for some reason I put the label as the container of the form and that was the issue for not being selectable on mobile.

<label>
    <contact form>...</contact form>
</label>

Seemed to break all inputs except the first input and the submit.

Answer 5

iPhone6 chrome

Problem for me was placing the input field inside <label> and <p>

like this :

<label>
  <p>
     <input/>
  </p>
</label>

I changed them to

<div>
  <div>
     <input/>
  </div>
</div>

And it works for me .

After check this answer, Please check other answers in this page, this issue may have different reasons

Answer 6

I had this same issue just now in React.

I figured out that in the Router, Route. We cannot do this as it causes this issue of closing the mobile keyboard.

<Route 
 path = "some-path"
 component = {props => <MyComponent />}
 />

Make sure and use the render instead in this situation

<Route 
 path = "some-path"
 render = {props => <MyComponent />}
 />

Hope this helps someone

Daniel