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

User · Answer

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 · Answer

In my case it was Bootstrap popup in opened state  Text input was in another calendar popup on top of Bootstrap one  input got its focus back after removing tabindex  -1  attribute from Bootstrap modal

User · Answer

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

User · Answer

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

User · Answer

I had this problem for over 6 months  it may be the same issue  Main symptom is that you can t move the cursor or select text in text inputs  only the arrow keys allow you to move around in the input field  Very annoying problem  especially for textarea input fields  I have this html that gets populated with 1 out of 100s of forms via Javascript    lt div class  dialog  id  alert  draggable  true  gt       lt div id  head  class  dialog head  gt           lt img id  icon  src  images icon png  height 20 width 20 gt  lt img id  icon name  src  images icon name png  height 15 gt  lt img id  alert close button  class  close button  src  images close png  gt       lt  div gt       lt div id  type  class  type  gt  lt  div gt       lt div class  scroll div  gt           lt div id  spinner  class  spinner  gt  lt  div gt           lt div id  msg  class  msg  gt  lt  div gt           lt div id  form  class  form  gt  lt  div gt       lt  div gt   lt  div gt    Apparently 6 months ago I had tried to make the popup draggable and failed  breaking text inputs at the same time  Once I removed  draggable  true  it works again

User · Answer

This can occur in bootstrap if you do not place your columns inside a  lt div class   row  gt   The column floats are not cleared and you could get the next column overlying the previous  hence clicks wont hit the dom elements where you expect

User · Answer

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

User · Answer

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

User · Answer

This will also happen anytime a div ends up positioned over controls in another div  like using bootstrap for layout  and having a  col-lg-4  followed by a  col-lg 8  misspelling    the right orphaned misnamed div covers the left  and captures the mouse events  Easy to blow by that misspelling  - and   next to each other on keyboard   So  pays to examine with inspector and look for  surprises  to uncover these wild divs   Is there an unseen window covering the controls and blocking events  and how can that happen   Turns out  fatfingering   for - with bootstrap classnames is one way

User · Answer

Use the onclick  this select    attribute for the input tag

User · Answer

I had the same problem  Tore my hair for hours trying all sorts of solutions  Turned out to be an unclosed a tag Try validate your HTML code  solution could be an unclosed tag causing issues

User · Answer

I m using JQuery UI and Bootstrap so I faced this issue and I think it is a conflict between the two as in normal case the textarea or the input filed is editable by nature but I made this solution after testing all the above answers but none solve the cross browser support for all major browsers  but I solved it and I like to share my solution you can use it on input text and textarea    Tested on Desktop  IE  All Versions   Chrome  Safari  Windows Edge  Firefox  Visual Studio Cordova Ripple Viewer on Windows  amp  Visual Studio Cordova Windows 10 Store App    Tested on Mobile  Chrome  Firefox  Android Internet Browser  amp  Visual Studio Cordova App on Android  amp  Visual Studio Cordova Windows 8   8 1   10 Phone App   This is the HTML Code    lt textarea contenteditable id  textarea  gt  lt  textarea gt    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 On Document Ready     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           amp  amp  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 on my web application at www gahwehsada com

User · Answer

I had the same problem  I eventually figured it out by inspecting the element and the element I thought I had selected was different element  When I did that I found there was a hidden element that had z-index of 9999  once I fixed that my problem went away

User · Answer

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

User · Answer

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

User · Answer

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    lt label gt       lt contact form gt     lt  contact form gt   lt  label gt    Seemed to break all inputs except the first input and the submit

User · Answer

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

User · Answer

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

User · Answer

the problem for me was that I was using  class  modal fade   I changed it for  class  modal hide   That solved the issue

User · Answer

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    lt Route   path    some-path   component    props   gt   lt MyComponent   gt      gt    Make sure and use the render instead in this situation   lt Route   path    some-path   render    props   gt   lt MyComponent   gt      gt    Hope this helps someone   Daniel

User · Answer

This happens sometimes when there are unbalanced  lt label gt  tags in the form

User · Answer

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 · Answer

iPhone6 chrome  Problem for me  was placing the input field inside  lt label gt  and  lt p gt   like this       lt label gt     lt p gt        lt input  gt     lt  p gt   lt  label gt    I changed them to    lt div gt     lt div gt        lt input  gt     lt  div gt   lt  div gt    And it works for me     After check this answer  Please check other answers in this page  this issue may have different reasons

User · Answer

I had this problem because of this code        table tbody tr td first-child   bind  mousedown   function e       e preventDefault          this  parents  tr   removeClass  draggable          I resolved it by removing      e preventDefault      New code       table tbody tr td first-child   bind  mousedown   function          this  parents  tr   removeClass  draggable

User · Answer

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

User · Answer

I just found another possible reason for this issue  some input textboxes were missing the closing      so i had  lt input     gt  when the correct form is  lt input       gt   That fixed it for me

User · Answer

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

[javascript] HTML input fields does not get focus when clicked

Examples related to javascript

Examples related to html

Examples related to css