HTML input fields do not get focus when pressed

Question

I have a problem and I can’t understand what exactly causes this behavior. I cannot access my input and textarea fields in my HTML form.

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

Can someone 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 on it, the field does not receive focus. I can access the field by pressing the Tab key, and if I right-click on it, and then click on the field, I will also get focus for it.

... and no, they have no disabled or readonly attributes; -)

Answer 1

when I click on it, the field does not receive focus. I can access the field by pressing the tab-key

It looks like you have canceled the default action for the mousedown event. Search through HTML and JS for onmousedown handlers and find the line that reads.

 return false; 

This line may stop focusing by clicking.

---

Re: your comment, I assume that you cannot edit the code that this handler adds? If you can, the easiest solution is to simply remove the return false; .

Is there a way to add functionality to an event-trigger without overwriting it?

It depends on how the handler is bound. If it is used using the traditional registration method, for example, element.onmousedown, then you can create a wrapper for it:

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

Since this "wrapper" does not return false, it does not cancel the default action (focus) for the element. If your event is connected using an advanced registration method, such as addEventListener or attachEvent, you can only remove the event handler using the function name / link and reconnect it using a wrapped function similar to that described above. If this is an anonymous function that has been added and you cannot get a link to it, the only solution would be to attach another event handler and manually focus the element using the element.focus () method.

Answer 2

I also had this problem. I used the jQuery UI disableSelection() method for the parent DIV that contained my input fields. In Chrome, the input fields were not affected, but in Firefox the inputs (and text fields) also did not focus 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 3

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

The same problem can be caused by placing "input" elements inside a pair of "label" tags.

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

It displayed normally on the screen, but when I clicked on any of the text fields, the cursor continued to jump back to the first "input" and really act unstable.

It took me a while to figure this out, because this behavior is subtle, and not at all what I would expect from this kind of error.

bsnider

Answer 4

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

Answer 5

I struggled with the same problem a while ago. I used the jquery.layout plugin in the jquery-ui modal dialog box and I could not access any of the fields in it.

This seemed to be a z-index problem (some div were over my input fields, so I couldn't click them). You should check this and try changing the z-index value of your input fields.

Answer 6

This happens sometimes when unbalanced <label> tags are in the form.

Answer 7

I had this problem too, and in my case, I found that the font color was the same background color, so it looked like nothing had happened.

Answer 8

If you run into this problem when using the DOM canvas on mobile devices, Ashwin G answer worked fine for me, but I did it through javascript

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

After that, everything worked flawlessly.

Answer 9

I read all the answers above, and some of them led me to a problem, but not a solution to the problem.

The root cause of the problem is disableSelection() . This causes all the problems, but deleting it is not a solution, since (at least in 2016 or a little earlier) on touch-screen devices , you have the opportunity to use this if you want to be able to move objects using jQuery.

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

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

form in a jQuery element is just to stop distributing in the form, as you may need to propagate to some elements.

Answer 10

This can happen in bootstrap if you do not place your columns inside <div class ='row'> . Floating columns are not cleared, and you can get the next column preceding the previous one, so clicks will not get into the dom elements where you expect.

Answer 11

I had a similar problem - I could not understand what was the reason, but I fixed it using the following code. One way or another, he could not focus only on the empty inputs:

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

Answer 12

I had this problem due to this code:

 $("#table tbody tr td:first-child").bind("mousedown", function(e){ e.preventDefault(); $(this).parents('tr').removeClass('draggable'); }); 

I resolved it by deleting

e.preventDefault ();

New code:

 $("#table tbody tr td:first-child").bind("mousedown", function(){ $(this).parents('tr').removeClass('draggable'); }); 

Answer 13

I use JQuery UI and Bootstrap , so I ran into this problem, and I think this is a conflict between them, as in the normal case the text area or input file is edited by nature, but I made this decision after testing all of the above answers, but none of them allowed cross-browser support for all major browsers , but I solved it and I like to share my solution with which you can use it. input text and text box

(Tested on the desktop: IE (all versions), Chrome, Safari, Windows Edge, Firefox, Visual Studio Cordoba Ripple Viewer on Windows and Visual Studio Cordoba Windows 10 Store App)

(tested on mobile devices: Chrome, Firefox, Android Internet Browser and Visual Studio. Cordova application for Android and Visual Studio Cordova Windows 8 + 8.1 + 10 Phone App)

This is the HTML:

 <textarea contenteditable id="textarea"></textarea> 

This is the CSS code:

 textarea { -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; /*to make sure that background color and text color is not the same (from the answers above)*/ background-color:#fff !important; color:#733E27 !important; } 

This is the jQuery code in the finished document

 $("textarea").click(function() { setTimeout(function(){ $("textarea").focus(); //add this if you are using JQuery UI (From The Solutions Above) $("textarea").enableSelection(); var val = $("textarea").val(); if (val.charAt(val.length-1) !== " " && val.length !== 1) { alert(val.length); val += " "; } $("textarea").val(val); }, 0); }); if (navigator.userAgent.indexOf('Safari') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) { //alert('Its Safari or chrome'); $("textarea").onfocus(function(e) { setTimeout(function(){ var end; if ($("textarea").val === "") { end = 0; } else { end = $("textarea").val.length; } if ($("textarea").setSelectionRange) { var range = document.getElementById('textarea').createTextRange(); if (range) { setTimeout(range, 0, [end, end]); } else { // IE style var aRange = document.getElementById('textarea').createTextRange(); aRange.collapse(true); aRange.moveEnd('character', end); aRange.moveStart('character', end); aRange.select(); } } e.preventDefault(); return false; }, 0); }); } 

You can test it in your web application www.gahwehsada.com

Answer 14

When you speak

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

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

If you check the DOM using Chrome or Firefox, you can see any attributes added to input fields via javasript or even an overlay div

Answer 15

Just in case, if someone is looking for this answer, we ran into a similar problem and solved it by changing the z-index of the input tags. Apparently, some other divs expanded too much and overlapped the input fields.

Answer 16

I had this problem for more than 6 months, it could be the same problem. The main symptom is that you cannot move the cursor or select text in text inputs, only the arrow keys allow you to move to the input field. A very nasty problem, especially for textarea input fields. I have this html that fills 1 of the 100s forms through Javascript:

 <div class="dialog" id="alert" draggable="true"> <div id="head" class="dialog_head"> <img id='icon' src='images/icon.png' height=20 width=20><img id='icon_name' src='images/icon_name.png' height=15><img id='alert_close_button' class='close_button' src='images/close.png'> </div> <div id="type" class="type"></div> <div class='scroll_div'> <div id="spinner" class="spinner"></div> <div id="msg" class="msg"></div> <div id="form" class="form"></div> </div> </div> 

Apparently, 6 months ago, I tried to make the pop-up window draggable and failed, while breaking the text inputs. As soon as I remove draggable = "true", it works again!

Answer 17

I found another possible reason for this problem, some input text fields were missing the closing "/", so I had <input ...> when the correct form is <input ... /> . This fixed it for me.

Answer 18

In my case, this is a Bootstrap popup in open state. The text input was in another popup at the top of Bootstrap, the input got its focus back after removing the tabindex="-1" attribute from Bootstrap modal.

Answer 19

iPhone6 ​​Chrome

The problem for me was putting 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 checking this answer, please check the other answers on this page, this question may have different reasons.

Answer 20

This will also happen anytime a div appears above controls in another div; for example, using bootstrap for the layout, and having “col-lg-4” followed by a “spelling error” col-lg = 8 ... the right orphan / misnamed div closes the left and captures mouse events. Easy to hit with this spelling font - and = next to each other on the keyboard. So, it pays to explore with the inspector and look for “surprises” to uncover these wild divs.

Is there an invisible window covering controls and blocking events, and how can this happen? It turns out that fat = for - with bootstrap classnames is one way ...

Answer 21

I had the same problem. In the end, I figured this out by checking the element, and the element I thought I selected was different. When I did this, I found that there is a hidden element with z-index 9999, after I fixed that my problem disappeared.

Answer 22

The problem for me was that I used class="modal fade" , I changed it to class="modal hide" . This solved the problem.

Answer 23

I had the same problem. For many hours I tried my muscles trying to find all kinds of solutions. It turned out to be an unclosed a tag. Check your HTML code, the solution may be a private tag causing problems.

Answer 24

I had this problem using the Bootstrap + 7 download form. For some reason, I placed the shortcut as the form container, and this was not a problem to select on a mobile device.

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

Suppose that all input except the first input is sent and sent.

Answer 25

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

Answer 26

I had this problem caused by some overlapping div element with initial loading of class ="row" over the "brother" div element with class="col" , the first one hid the focus of the second div element.

I decided to remove the outer div row element from this level of the div tree and rebalance the logical hierarchy of the bootstrap based on the row and col classes.

Answer 27

I had the same problem just now in React.

I realized that in the router, Route. We cannot do this, as this causes a problem with closing the mobile keyboard.

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

Make sure to use the render instead in this situation.

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

Hope this helps someone

Daniel