HTML-Eingabefelder werden beim Klicken nicht fokussiert

Ich habe ein Problem und kann nicht herausfinden, was genau dieses Verhalten verursacht. Ich kann nicht auf meine Eingabefelder und textareas in meinem HTML-Formular zugreifen .

Leider sind JS, HTML und CSS sehr groß, so dass ich hier nicht wirklich alles posten kann.

Kann mir jemand sagen, worauf ich beim Debuggen dieses seltsamen Verhaltens achten muss?

AKTUALISIEREN

Wenn ich den Cursor über das inputFeld bewege, kann ich den Textcursor sehen, aber wenn ich darauf klicke, erhält das Feld nicht den Fokus. Ich kann auf das Feld zugreifen, indem Tabich die Taste drücke. Wenn ich mit der rechten Maustaste darauf klicke und dann auf das Feld klicke, bekomme ich auch den Fokus dafür.

... und nein, sie haben keine disabledoder readonlyAttribute ;-)

Wenn ich darauf klicke, bekommt das Feld nicht den Fokus. Ich kann auf das Feld zugreifen, indem ich die "Tabulatortaste" drücke.

Es hört sich so an, als hätten Sie die Standardaktion für das Mousedown- Ereignis abgebrochen . Durchsuchen Sie HTML und JS nach Onmousedown-Handlern und suchen Sie nach einer Zeile, die lautet.

return false;

Diese Linie hindert Sie möglicherweise daran, durch Klicken zu fokussieren.

Betreff: Ihr Kommentar, ich gehe davon aus, dass Sie den Code, der diesen Handler hinzufügt, nicht bearbeiten können? Wenn Sie können, besteht die einfachste Lösung darin, die return false;Anweisung einfach zu entfernen .

Gibt es eine Möglichkeit, dem Ereignisauslöser nur Funktionen hinzuzufügen, indem er nicht überschrieben wird?

Das hängt davon ab, wie der Handler angeschlossen ist. Wenn es mit der herkömmlichen Registrierungsmethode angehängt wird, z. B. element.onmousedown , können Sie einen Wrapper dafür erstellen:

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

Da dieser "Wrapper" nicht false zurückgibt , wird die Standardaktion (Fokussierung) für das Element nicht abgebrochen. Wenn Ihr Ereignis mit einer erweiterten Registrierungsmethode wie addEventListener oder attachEvent angehängt wird, können Sie den Ereignishandler nur mithilfe des Funktionsnamens / der Referenz entfernen und ihn mit einer umschlossenen Funktion wie der oben genannten erneut anhängen . Wenn es sich um eine anonyme Funktion handelt, die hinzugefügt wurde und auf die Sie keinen Verweis darauf erhalten können, besteht die einzige Lösung darin, einen anderen Ereignishandler anzuhängen und das Element manuell mit der Methode element.focus () zu fokussieren .

Ich hatte auch dieses Problem. Ich habe die disableSelection()Methode der jQuery-Benutzeroberfläche auf einem übergeordneten DIV verwendet, das meine Eingabefelder enthielt. In Chrome waren die Eingabefelder nicht betroffen, aber in Firefox konzentrierten sich die Eingaben (und auch die Textbereiche) nicht auf das Klicken. Das Seltsame hier war, dass das Klickereignis auf diesen Eingaben funktionierte.

Die Lösung bestand darin, die disableSelection()Methode für das übergeordnete DIV zu entfernen .

Ich weiß, dass dies ein sehr alter Thread ist, aber das ist mir erst kürzlich passiert. Ich habe eine Weile gebraucht, um es herauszufinden.

Das gleiche Problem kann dadurch verursacht werden, dass 'Eingabe'-Elemente in ein Paar von' Label'-Tags eingefügt werden.

In meinem Fall hatte ich vor, ein Paar 'div'-Tags zu erstellen, aber stattdessen habe ich versehentlich ein Paar' label'-Tags erstellt und dann einige Texteingabefelder 'input type = "text" ..' mit DOM eingefügt.

Es wurde normal auf dem Bildschirm angezeigt, aber als ich auf eines der Textfelder klickte, sprang der Cursor immer wieder zur ersten 'Eingabe' zurück und verhielt sich wirklich unberechenbar.

Ich habe eine Weile gebraucht, um das herauszufinden, weil dieses Verhalten subtil ist und überhaupt nicht das, was ich von einem solchen Fehler erwartet hätte.

bsnider

Verwenden Sie das onclick="this.select()"Attribut für das Eingabe-Tag.

Ich habe vor einiger Zeit mit dem gleichen Problem zu kämpfen. Ich habe das Plugin jquery.layout in einem modalen jquery-ui-Dialogfeld verwendet und konnte auf keines der Felder darin zugreifen.

Es schien ein z-indexProblem zu sein (einige divwaren über meinen Eingabefeldern, so dass ich sie nicht anklicken konnte). Sie sollten es ausprobieren und versuchen, den z-indexWert Ihrer Eingabefelder zu ändern .

Dies passiert manchmal, wenn <label>das Formular unausgeglichene Tags enthält.

Ich hatte auch dieses Problem und in meinem Fall stellte ich fest, dass die Farbe der Schrift die gleiche Farbe wie der Hintergrund war, sodass es so aussah, als wäre nichts passiert.

Dies kann im Bootstrap auftreten, wenn Sie Ihre Spalten nicht in a platzieren <div class ='row'>. Die Spalten-Floats werden nicht gelöscht, und Sie können die nächste Spalte über der vorherigen Spalte abrufen. Daher werden Klicks nicht auf die Dom-Elemente treffen, die Sie erwarten.

Wenn Sie bei der Verwendung von Canvas mit DOM auf Mobilgeräten mit diesem Problem konfrontiert sind, hat die Antwort von Ashwin Gfür mich perfekt funktioniert, aber ich habe es über Javascript gemacht

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

Danach hat alles einwandfrei funktioniert.

Ich habe alle Antworten oben gelesen und einige haben mich auf das Problem hingewiesen, aber nicht auf die Lösung des Problems.

Die Hauptursache des Problems ist disableSelection(). Es verursacht alle Probleme, aber das Entfernen ist keine Lösung, da Sie (zumindest 2016 oder etwas früher) auf Touchscreen-Geräten dies "verwenden" müssen, wenn Sie Objekte mit jQuery verschieben möchten .

Die Lösung bestand darin, das disableSelection()dem sortierbaren Element zu überlassen , aber auch eine Bindungsaktion direkt darüber hinzuzufügen:

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

Das formElement im jQuery dient lediglich dazu, die Weitergabe im Formular zu stoppen, da Sie möglicherweise die Weitergabe für einige Elemente benötigen.

Ich hatte das ähnliche Problem - konnte nicht herausfinden, was der Grund war, aber ich habe es mit folgendem Code behoben. Irgendwie konnte es nicht nur die leeren Eingaben fokussieren:

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

Ich hatte dieses Problem aufgrund dieses Codes:

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

Ich habe es durch Entfernen gelöst

e.preventDefault ();

Neuer Code:

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

Ich verwende JQuery UI und Bootstrap, daher habe ich dieses Problem festgestellt und denke, dass es sich um einen Konflikt zwischen beiden handelt, da im Normalfall der Textbereich oder die eingegebene Eingabe von Natur aus bearbeitet werden kann. Ich habe diese Lösung jedoch nach dem Testen aller oben genannten Antworten, jedoch ohne, erstellt Lösen Sie die Cross-Browser-Unterstützung für alle gängigen Browser , aber ich habe sie gelöst und möchte meine Lösung teilen. Sie können sie für Eingabetexte und Textbereiche verwenden

(Getestet auf dem Desktop: IE (alle Versionen), Chrome, Safari, Windows Edge, Firefox, Visual Studio Cordova Ripple Viewer unter Windows und Visual Studio Cordova Windows 10 Store App)

(Getestet auf Mobilgeräten: Chrome, Firefox, Android-Internetbrowser und Visual Studio Cordova-App auf Android- und Visual Studio Cordova Windows 8 + 8.1 + 10-Telefon-App)

Dies ist der HTML-Code:

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

Dies ist der 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;
 }        

Dies ist der JQuery-Code für Dokumente bereit

$("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);
        });
    }

Sie können es in meiner Webanwendung unter www.gahwehsada.com testen

Wenn du sagst

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

Ist dies durch Anzeigen Ihres HTML, des Quellcodes der Seite oder des DOM?

Wenn Sie das DOM mit Chrome oder Firefox überprüfen, können Sie alle Attribute sehen, die den Eingabefeldern über Javasript oder sogar ein überlagerndes Div hinzugefügt wurden

Nur für den Fall, dass jemand anderes nach dieser Antwort sucht, hatten wir ein ähnliches Problem und haben es gelöst, indem wir den Z-Index der Eingabe-Tags geändert haben. Anscheinend hatten sich einige andere Divs zu weit ausgedehnt und überlappten die Eingabefelder.

Ich hatte dieses Problem seit über 6 Monaten, es kann das gleiche Problem sein. Das Hauptsymptom ist, dass Sie den Cursor nicht bewegen oder keinen Text in Texteingaben auswählen können. Nur die Pfeiltasten ermöglichen es Ihnen, sich im Eingabefeld zu bewegen. Sehr ärgerliches Problem, insbesondere bei Textfeld-Eingabefeldern. Ich habe dieses HTML, das über Javascript mit 1 von 100 Formularen gefüllt wird:

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

Anscheinend hatte ich vor 6 Monaten versucht, das Popup ziehbar zu machen, und es schlug fehl, während gleichzeitig die Texteingaben unterbrochen wurden. Sobald ich draggable = "true" entfernt habe, funktioniert es wieder!

Ich habe gerade einen anderen möglichen Grund für dieses Problem gefunden. In einigen Eingabetextfeldern fehlte das schließende "/", also hatte ich, <input ...>wenn das richtige Formular ist <input ... />. Das hat es für mich behoben.

In meinem Fall war es das Bootstrap-Popup im geöffneten Zustand. Die Texteingabe erfolgte in einem anderen Kalender-Popup über Bootstrap 1, die Eingabe wurde nach dem Entfernen des tabindex="-1"Attributs aus dem Bootstrap-Modal wieder fokussiert .

iPhone6 ​​Chrom

Das Problem für mich war, das Eingabefeld in <label>und zu platzieren<p>

so was :

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

Ich habe sie geändert in

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

Und es funktioniert bei mir.

Nachdem Sie diese Antwort überprüft haben, überprüfen Sie bitte andere Antworten auf dieser Seite. Dieses Problem kann andere Gründe haben

Dies geschieht auch immer dann, wenn ein Div über Steuerelementen in einem anderen Div positioniert wird. B. Bootstrap für das Layout verwenden und ein "col-lg-4" gefolgt von einem "col-lg = 8" falsch schreiben ... das rechte verwaiste / falsch benannte div deckt das linke ab und erfasst die Mausereignisse. Leicht durch diese Rechtschreibfehler zu blasen, - und = nebeneinander auf der Tastatur. Es lohnt sich also, mit dem Inspektor zu prüfen und nach „Überraschungen“ zu suchen, um diese wilden Divs aufzudecken.

Gibt es ein unsichtbares Fenster, das die Steuerelemente und Blockierungsereignisse abdeckt, und wie kann das passieren? Es stellt sich heraus, dass fatfingering = for - mit Bootstrap-Klassennamen eine Möglichkeit ist ...

Ich hatte das gleiche Problem. Ich fand es schließlich heraus, indem ich das Element inspizierte und das Element, von dem ich dachte, ich hätte es ausgewählt, war ein anderes Element. Als ich das tat, stellte ich fest, dass es ein verstecktes Element mit einem Z-Index von 9999 gab, als ich feststellte, dass mein Problem behoben war.

Das Problem für mich war, dass ich es verwendet habe class="modal fade", ich habe es für geändert class="modal hide". Das hat das Problem gelöst.

Ich hatte das gleiche Problem. Ich habe stundenlang meine Haare zerfetzt und alle möglichen Lösungen ausprobiert. Erwies sich als ein nicht geschlossenes sein ein tag.Try Validieren Sie Ihre HTML - Code, Lösung eine nicht geschlossene Tag verursacht Probleme sein könnte

Ich hatte dieses Problem mit dem Bootstrap + -Kontaktformular 7. Aus irgendeinem Grund habe ich das Etikett als Container des Formulars angegeben, und das war das Problem, weil es auf Mobilgeräten nicht auswählbar war.

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

Schien alle Eingaben außer der ersten Eingabe und der Übermittlung zu unterbrechen.

Ich hatte das gleiche Problem und die Korrektur bestand darin, die Platzhalter zu entfernen, und ich habe das Design des Formulars geändert, um Beschriftungen anstelle von Platzhaltern zu verwenden ...

Ich hatte dieses Problem durch eine Art Überlappung eines divElements mit einem Bootstrap class ="row"über ein "Bruder" div-Element mit dem class="col", das erste versteckte den Fokus des zweiten divElements.

Ich habe es gelöst, das div rowElement von dieser Ebene des Divs-Baums zu entfernen und so die logische Bootstrap-Hierarchie basierend auf den Klassen rowund neu colauszugleichen.

Ich hatte das gleiche Problem gerade in React.

Ich habe das im Router Route herausgefunden. Wir können dies nicht tun, da dies das Problem des Schließens der mobilen Tastatur verursacht.

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

Stellen Sie sicher, dass Sie in dieser Situation stattdessen den Render verwenden

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

Hoffe das hilft jemandem

Daniel