Les champs de saisie HTML ne sont pas activés lorsque l'utilisateur clique dessus
J'ai un problème et je ne peux pas comprendre ce qui cause exactement ce comportement. Je ne peux pas accéder à mes champs de saisie et à textareas sur mon formulaire HTML.
Malheureusement, JS, HTML et CSS sont très volumineux, je ne peux donc pas tout poster ici.
Quelqu'un peut-il me dire quoi rechercher lors du débogage de ce comportement étrange?
UPDATE
Si je déplace le curseur sur le champ input, je peux voir le curseur de texte, mais lorsque je clique dessus, le champ n’a pas le focus. Je peux accéder au champ en appuyant sur le bouton Tab clé et si je fais un clic droit dessus puis un clic sur le champ, j’obtiens également le focus.
... et non, ils n'ont pas les attributs disabled ou readonly ;-)
quand je clique dessus, le champ ne reçoit pas le focus. je peux accéder au champ en appuyant sur la touche "tab"
On dirait que vous avez annulé l'action par défaut pour l'événement mousedown. Recherchez dans votre HTML et votre JS les gestionnaires onmousedown et recherchez une ligne qui se lit.
return false;
Cette ligne peut vous empêcher de vous concentrer en cliquant sur.
Re: votre commentaire, je suppose que vous ne pouvez pas éditer le code qui ajoute ce gestionnaire? Si vous le pouvez, la solution la plus simple consiste à supprimer simplement l'instruction return false;.
y a-t-il un moyen d'ajouter simplement des fonctionnalités au déclencheur d'événement en ne le remplaçant pas?
Cela dépend de la façon dont le gestionnaire est attaché. S'il est attaché à l'aide de la méthode d'enregistrement traditionnelle, par ex. element.onmousedown, vous pouvez alors créer un wrapper pour cela:
var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
oldFunc.call(this, evt || window.event);
}
Puisque ce "wrapper" ne renvoie pas false, il n'annulera pas l'action par défaut (mise au point) de l'élément. Si votre événement est attaché à l'aide d'une méthode d'enregistrement avancée, telle que addEventListener ou attachEvent, vous pouvez uniquement supprimer le gestionnaire d'événements à l'aide de la fonction name/reference et le rattacher avec une fonction encapsulée similaire à la précédente. Si c'est une fonction anonyme qui est ajoutée et que vous ne pouvez pas y faire référence, la seule solution serait alors d'attacher un autre gestionnaire d'événements et de focaliser l'élément manuellement à l'aide de la méthode element.focus ().
J'ai eu ce problème également. J'ai utilisé la méthode disableSelection() de l'interface utilisateur jQuery sur un DIV parent contenant mes champs d'entrée. Dans Chrome, les champs de saisie n'étaient pas affectés, mais dans Firefox, les entrées (ainsi que les zones de texte) n'étaient pas centrées sur le clic. La chose étrange ici était que l'événement click sur ces entrées a fonctionné.
La solution consistait à supprimer la méthode disableSelection() pour la division parent.
Je sais que c'est un très vieux fil, mais cela m'est arrivé récemment; m'a pris un certain temps pour le comprendre.
Ce même problème peut être provoqué en plaçant des éléments 'input' dans une paire de balises 'label'.
Dans mon cas, j'avais l'intention de créer une paire de balises 'div' mais au lieu de cela, j'ai créé accidentellement une paire de balises 'label', puis inséré des champs de saisie de texte 'input type = "text" ..' en utilisant DOM.
Il s’affiche normalement à l’écran, mais lorsque je clique sur l’un des champs de texte, le curseur revient à la première entrée et agit de manière erratique.
Il m'a fallu un certain temps pour comprendre cela, parce que ce comportement est subtil et pas du tout ce à quoi je m'attendais de ce type d'erreur.
bsnider
Utilisez l'attribut onclick="this.select()" pour la balise d'entrée.
Je suis aux prises avec le même problème il y a quelque temps. J'utilisais le plugin jquery.layout dans une boîte de dialogue modale jquery-ui et je ne pouvais accéder à aucun de ses champs.
Il semble que ce soit un problème de z-index (une div recouvrait mes champs de saisie, je ne pouvais donc pas cliquer dessus). Vous devriez vérifier et essayer de changer la valeur z-index de vos champs de saisie.
Cela se produit parfois lorsqu'il y a des balises <label> non équilibrées dans le formulaire.
J'ai eu ce problème aussi, et dans mon cas, j'ai trouvé que la couleur de la police de caractères était la même que celle de l'arrière-plan. Il semblait donc que rien ne s'était passé.
Si vous rencontrez ce problème lorsque vous utilisez canvas avec DOM sur des appareils mobiles, la réponse de Ashwin G a parfaitement fonctionné pour moi, mais je l'ai fait via javascript.
var element = document.getElementById("myinputfield");
element.onclick = element.select();
Après, tout a fonctionné parfaitement.
Cela peut se produire dans bootstrap si vous ne placez pas vos colonnes dans un <div class ='row'>. Les flotteurs de colonne ne sont pas effacés et vous pouvez obtenir la colonne suivante recouvrant la précédente. Par conséquent, les clics ne touchent pas les éléments dom où vous vous attendez.
J'ai lu toutes les réponses ci-dessus, et certaines m'ont dirigé vers le problème, mais pas vers la solution du problème.
La cause première du problème est disableSelection(). Cela cause tous les problèmes, mais le supprimer n’est pas une solution, car (au moins en 2016 ou un peu avant), sur les appareils à écran tactile , vous devez "l’utiliser" si vous voulez pouvoir déplacer des objets avec jQuery.
La solution a été de laisser la disableSelection() à l'élément triable, mais également d'ajouter une action de liaison juste au-dessus:
$('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
event.stopImmediatePropagation();
})
La form dans l'élément jQuery consiste simplement à arrêter la propagation sur le formulaire, car vous pourriez avoir besoin de propagation sur certains éléments.
J'ai eu ce problème à cause de ce code:
$("#table tbody tr td:first-child").bind("mousedown", function(e){
e.preventDefault();
$(this).parents('tr').removeClass('draggable');
});
Je l'ai résolu en enlevant
e.preventDefault ();
Nouveau code:
$("#table tbody tr td:first-child").bind("mousedown", function(){
$(this).parents('tr').removeClass('draggable');
});
J'ai eu le même problème - je ne pouvais pas comprendre la raison, mais je l'ai corrigé en utilisant le code suivant. D'une manière ou d'une autre, il ne pouvait pas concentrer uniquement les entrées vierges:
$('input').click(function () {
var val = $(this).val();
if (val == "") {
this.select();
}
});
J'ai ce problème depuis plus de 6 mois, c'est peut-être le même problème. Le symptôme principal est que vous ne pouvez pas déplacer le curseur ou sélectionner du texte dans les entrées de texte, seules les touches fléchées vous permettent de vous déplacer dans le champ de saisie. Problème très gênant, en particulier pour les champs de saisie textarea. J'ai ce code HTML qui est rempli avec 1 formulaire sur 100 via 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>
Apparemment, il y a 6 mois, j'avais essayé de rendre la fenêtre popup glissable et échouée, en cassant les entrées de texte en même temps. Une fois que j'ai enlevé draggable = "true" ça marche encore!
Quand tu dis
and nope, they don't have attributes: disabled="disabled" or readonly ;-)
Est-ce à travers l'affichage de votre code HTML, du code source de la page ou du DOM?
Si vous inspectez le DOM avec Chrome ou Firefox, vous pourrez voir tous les attributs ajoutés aux champs de saisie via javasript, ou même un div superposé.
iPhone6 chrome
Le problème pour moi était de placer le champ de saisie dans <label> et <p>
comme ça :
<label>
<p>
<input/>
</p>
</label>
Je les ai changés pour
<div>
<div>
<input/>
</div>
</div>
Et cela fonctionne pour moi .
_ {Après avoir vérifié cette réponse, veuillez vérifier les autres réponses sur cette page, ce problème peut avoir différentes raisons} _
Juste au cas où quelqu'un d'autre chercherait cette réponse, nous avions un problème similaire et nous l'avons résolu en modifiant l'indice z des balises d'entrée. Apparemment, d'autres divs s'étaient trop étendus et chevauchaient les zones de saisie.
Je viens de trouver une autre raison possible à ce problème: certaines zones de texte étaient manquantes avec le "/" de clôture. J'avais donc <input ...> lorsque le formulaire correct est <input ... />. Cela a réglé le problème pour moi.
Dans mon cas, la fenêtre contextuelle de Bootstrap était à l'état ouvert . La saisie de texte se trouvait dans une autre fenêtre contextuelle de calendrier située en haut de Bootstrap, l'entrée a été réactivée après la suppression de l'attribut tabindex="-1" de Bootstrap modal.
J'ai eu le même problème. Je l'ai finalement trouvé en inspectant l'élément et l'élément que je pensais avoir choisi était un élément différent. Lorsque j’ai fait cela, j’ai découvert qu’il y avait un élément caché qui avait un indice z de 9999, une fois que j’ai réglé le problème, mon problème est parti.
J'ai eu ce problème en utilisant Bootstrap + formulaire de contact 7 . J'ai pour une raison quelconque, j'ai mis l'étiquette comme conteneur du formulaire et c'était le problème pour ne pas être sélectionnable sur mobile.
<label>
<contact form>...</contact form>
</label>
Semblait casser toutes les entrées sauf la première entrée et le soumettre.
J'ai eu le même problème tout à l'heure dans React.
J'ai compris cela dans le routeur, Route. Nous ne pouvons pas faire cela car cela pose le problème de la fermeture du clavier mobile.
<Route
path = "some-path"
component = {props => <MyComponent />}
/>
Assurez-vous et utilisez le rendu à la place dans cette situation
<Route
path = "some-path"
render = {props => <MyComponent />}
/>
J'espère que cela aide quelqu'un
Daniel
J'ai eu le même problème. Déchiré mes cheveux pendant des heures à essayer toutes sortes de solutions. Il s’est avéré qu’il s’agissait d’un tag a - tag. Essayez de valider votre code HTML, la solution pourrait être une balise non fermée posant problème
J'avais ce problème causé par une sorte de chevauchement d'un élément div avec un bootstrap class ="row" sur un élément "brother" div avec le class="col", le premier masquant le focus du second élément div.
J'ai résolu d'extraire l'élément div row de ce niveau de l'arborescence des divs et de rééquilibrer la hiérarchie logique du bootstrap en fonction des classes row et col.
le problème pour moi était que j'utilisais class="modal fade", je l'ai changé pour class="modal hide". Cela a résolu le problème.
Cela se produira également chaque fois qu'une division finira par se positionner sur les contrôles d'une autre division; comme utiliser bootstrap pour la mise en page, et avoir un "col-lg-4" suivi d'un "col-lg = 8" mal orthographié ... la div orpheline/mal nommée à droite recouvre la gauche et capture la souris événements. Il est facile de s’enfoncer par cette faute d’orthographe, - et = côte à côte sur le clavier. Alors, paye d’examiner avec un inspecteur et de chercher des "surprises" pour découvrir ces divs sauvages.
Existe-t-il une fenêtre invisible couvrant les contrôles et les événements bloquants, et comment cela peut-il se produire? Fatfingering = for - with bootstrap classnames est une solution ...
J'ai eu le même problème et le correctif était de supprimer les espaces réservés et j'ai modifié la conception du formulaire pour utiliser des étiquettes au lieu d'espaces réservés ...