HTML input fields does not get focus when clicked

user_357234 0
Viewed 140948

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

css html javascript
30 Answers

I have read all the answers above, and some directed me to the problem, but not to the solution for the problem.

The root cause of the problem is disableSelection(). It is causing all the problems, but removing it is not a solution, as (at least in 2016 or slightly before), on touch-screen devices, you "have" to use this if you want to be able to move objects with jQuery.

The solution was to leave the disableSelection() to the sortable element, but also add a binding action just above:

 $('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
    event.stopImmediatePropagation();
 })

The form in the jQuery element is just to stop propagation on the form, as you might need propagation on some elements.

user_16124690

For Anyone Using Electron

For anyone having this issue with Electron specifically, the problem for me was using alert before selecting the input fields. Apparently alert and confirm aren't entirely supported by Electron, and therefore can mess up input fields. If you'd still like to use them, refer to this post: https://stackoverflow.com/a/38859135/12293837

user_122938370

I just found another possible reason for this issue, some input textboxes were missing the closing "/", so i had <input ...> when the correct form is <input ... />. That fixed it for me.

user_5414320

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

user_67869410

I had the same issue and the fix was to remove the placeholders and I changed the design of the form to use labels instead of placeholders...

user_26335320

I had this issue caused by a sort of overlap of a div element with a bootstrap class ="row" over a "brother" div element with the class="col", the first hid the focus of the second div element.

I solved taking outer the div row element from that level of the divs' tree and so rebalancing bootstrap logical hierarchy based on the row and col classes.

user_37628550

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

user_87671730

Its worth adding that having the property pointer-events:none on your input label will also produce this unwanted behaviour.

user_36263340

It might be because of invalid for attribute in the label attribute

<input type="text" id="your_name" name="your_name">
<label for="your_name">Your Name</label>

<input type="text" id="your_email" name="your_name">
<label for="your_name">Your Name</label>

I have tried to update the for attribute in the second label to your_email instead of your_name and its works for me

<label for="your_email">Your Name</label>
user_115432530
Related