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

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.

Answer 2

This can occur in bootstrap if you do not place your columns inside a <div class ='row'>. 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.

Answer 3

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.

Answer 4

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 & Visual Studio Cordova Windows 10 Store App)

(Tested on Mobile: Chrome, Firefox, Android Internet Browser & Visual Studio Cordova App on Android & Visual Studio Cordova Windows 8 + 8.1 + 10 Phone App)

This is the HTML Code:

<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 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) !== " " && 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

Answer 5

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

Answer 6

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