J'ai un champ html d'entrée qui est désactivé. Dans certains navigateurs (Chrome, Edge, Internet Explorer et Opera), il est possible de sélectionner et de copier le texte mais, au moins, dans Firefox, ce n'est pas possible.
Vous pouvez le tester en exécutant le code suivant dans différents navigateurs:
<input type="text" disabled value="is disable"> <input type="text" readonly value="is readonly">
J'ai lu dans ici que les champs désactivés peuvent être focus , ici que Un élément d'entrée désactivé est inutilisable et non cliquable et dans ici que Un champ de saisie en lecture seule ne peut pas être modifié (cependant, un utilisateur peut y accéder, le mettre en surbrillance et en copier le texte) . p >
Je n'ai rien trouvé indiquant que le texte des entrées désactivées ne peut pas être copié.
Il existe un comportement standard et certains navigateurs ne le respectent pas ou les navigateurs peuvent-ils choisir si le texte une entrée désactivée peut ou ne peut pas être copiée?
Et il existe une solution pour permettre, dans tous les navigateurs, de copier le texte d'un champ de saisie désactivé?
Remarque: mon a pplication est implémentée en utilisant les langages Angular / TypeScript.
Il semble que le seul navigateur qui a un comportement distinct est firefox. J'ai ouvert un problème dans ici en essayant de comprendre s'il s'agit d'une option de conception ou si est un bug. J'attends maintenant une réponse.
3 Réponses :
Il n'y a rien de mal à faire cela lorsque vous désactivez un contrôle de formulaire.
function preventDisabledControlTextCopy(e)
{
// blah, blah, blah
if (e.target.disabled === true) {
// Add "preventSelection" to e.target.className
// Alternatively, change the focus to somewhere else!
} else {
// Remove "preventSelection" from e.target.className
}
}
// Blah, blah, blah-blah blah
textBox.addEventListener("select", preventDisabledControlTextCopy, false);
ou
.preventSelection {user-select: none} // IE 10+
Cependant, cela peut ne pas produire comportement cohérent en ce qui concerne la copie de texte (après l'avoir sélectionné).
Une méthode JavaScript imparfaite:
Je n'ai pas utilisé de select type événement dans un moment, mais je suggère de basculer la possibilité de sélectionner le texte. Vous pouvez également jouer avec les événements focus et flou .
Feuille de style CSS externe:
<input type="text" disabled="disabled" readonly="readonly" value="is disable">
W3Schools: sélection par l'utilisateur:
Gestionnaire d'événements rapide et sale:
<input type="text" disabled readonly value="is disable">
Ce n'est jamais une perte de temps de chercher des options. J'ai sauté de nombreux détails, mais j'ai rendu la partie importante explicite (car Stackoverflow est un outil que les gens utilisent pour apprendre des choses). La mise en œuvre dépend de vous.
Réflexions finales:
La meilleure réponse pourrait être d'utiliser CSS et JavaScript et d'activer visibilité: masqué code> (IE 4+) ou display: none (IE 8+), en fonction de votre scénario, de la structure DOM et de la complexité que vous pouvez gérer.
Formulaires dynamiques sont un excellent moyen de découvrir l'interaction entre HTML, CSS et JavaScript.
Changez votre champ de désactivé à lecture seule . C'est l'attribut correct pour le comportement que vous souhaitez.
Ne perdez pas de temps à pirater une solution javascript ensemble car elle sera encore plus floconneuse que les différences mineures dans le comportement du navigateur.
Si le problème est que vous voulez que vos champs en lecture seule ressemblent à des champs désactivés, il est assez facile de styliser une entrée avec un ensemble d'attributs readonly . Vous n'avez pas besoin de changer de comportement pour changer d'apparence.
<input readonly value="I am readonly">
input[readonly] {
background: #EEE;
color: #666;
border: solid 1px #CCC;
}
J'ai proposé la solution comportementale; L'utilisation de readonly modifie le comportement. Le style est de montrer que vous n'avez pas besoin de changer de comportement pour changer d'apparence.
J'ai essayé d'utiliser user-select dans une entrée, mais cela ne peut pas empêcher la sélection de texte. Même enveloppez-le dans un div avec un style user-select: none ne fonctionne toujours pas. Cela ne fonctionne que pour (je pense) les éléments non focalisables comme div, span, etc.
Cependant, pour le moment, je pense que user-select: none est la seule meilleure option si vous voulez vous assurer cet utilisateur ne copiera pas le texte de la page même dans de nombreux navigateurs différents (vérifiez la compatibilité des navigateurs sélectionnés par l'utilisateur). Je suggérerais donc de créer un composant qui ressemble à ceci:
<input *ngIf="!isDisabled" value="model" />
<div *ngIf="isDisabled" style="user-select: none">{{model}}</div>
Attention: vous devez styliser le div pour qu'il ressemble plus à une entrée désactivée .
Je peux copier le texte dans IE 11.
Oui, pas de problème dans IE11 pour moi non plus. Dans quelle version avez-vous testé? 11 est la seule version prise en charge et la seule qui soit compatible à distance avec les normes Web modernes. Vous avez raison de dire que cela ne fonctionne pas dans Firefox.
@CodingFreak Oui, tu as raison, mais j'avais testé avant la création de ce post et je ne peux pas copier le texte. Peut-être que j'ai mal testé.
visibilité: masquéepour la victoire. Vous devrez peut-être ajouter des fonctionnalités à votre formulaire, mais cela fonctionnera!