Création d'une zone de texte de navigateur croisée / champ de saisie de "tout" em> Sélectionnez son contenu sur Click / Tap. strong> P> Un problème qui a échappé beaucoup pendant des années. P> Le problème: strong> p> Lors de l'utilisation d'un périphérique tactile, le fichier Le moyen standard de sélectionner du texte consiste simplement à utiliser: p> Un autre travail sélectionné mentionné mentionné sur le débordement de pile est le suivant: p> Les deux fonctionnent bien, mais ils ne fonctionnent pas sur des appareils Apple. P> La seule solution de travail que j'ai trouvée est Pour créer une plage de sélection selon cette POST .
Ceci est pur JavaScript et fonctionne bien. P> appuyez sur code> Fires d'événement lorsque la souris utilise l'événement Cliquez sur CODE>. Sur onclick code> ou Onfocus code>. Ce n'est pas un problème spécifique de Safari strong> car Google Chrome Strort> a le même problème sur les appareils Apple mais pas em> sur des appareils Android. Il est clair que la différence de la manière dont les appareils Apple traitent des événements TAP. P>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input type text
<br/><input type="text" value="click me" class="Select">
<br/>Input type number
<br/><input type="number" value="0" class="Select">
<br/>I dont like apples.
6 Réponses :
Qu'en est-il de cela?
Parce que la cible doit toujours avoir un attribut de valeur (entrée / textarea), je préférerais utiliser event.target.selectionend = event.target.value.length ;
La limite de 999 est loin, mais je suis absolument d'accord avec @APOLO sur Event.Target.Value.length pour faire la sélection.
Je suis d'accord, les gars. Divulgation complète: je ne suis pas un développeur JavaScript et je résolviez ce problème avec une compréhension superficielle de ce qui était disponible dans la méthode. événement.target.value.length est clairement meilleur.
Tapez sur et cliquez sur deux événements. Différents systèmes d'exploitation mobile ont le moyen de cartographier les deux événements. Non seulement cliquez, Android et iOS Map Hover Events avec appuyez également de différentes manières. C'est comme il y a quelque temps où différents navigateurs ont un ensemble différent de JavaScript et que JQuery est là pour résoudre le problème.
Donc, je vous suggère d'utiliser une bibliothèque appelée Hammer.js pour le gérer. P>
var hammertime = new Hammer($(".testing")[0]);
hammertime.on('tap', function(ev) {
event.target.selectionStart = 0
event.target.selectionEnd = 999
});
var hammertime2 = new Hammer($(".testing2")[0]);
hammertime2.on('tap', function(ev) {
$(event.target).select(); //to select number input, use this method
});
Merci pour la suggestion de marteau, mais votre violon ne fonctionne pas et cela va toujours échouer sur les intrants en nombre. Droit?
Pour le champ de numéro, une autre méthode est nécessaire pour sélectionner la valeur, mais la fonction TAP fonctionne également sur les entrées numériques.
Qu'en est-il de changer temporairement l'attribut type?
de
Je suppose que le texte sélectionné doit être remplacé par l'entrée de l'utilisateur ...
de
Vous devrez restaurer l'attribut de type d'origine dès que les types d'utilisateurs dans quelque chose ou sur flou au cas où il quitterait le champ sans rien taper.
Je n'ai pas d'appareil Apple pour l'essayer ...
;) IMPORTAIRE EDIT: Je viens de l'essayer sur l'un de mes projets ... et ça marche ... mais si vous comptez Sur le type de numéro pour afficher un clavier numérique sur vos utilisateurs mobiles ... c'est le clavier de texte qui montre. Et juste après la saisie du premier caractère, car le champ est maintenant retourné sur "Numéro", Snap! Le clavier mobile vient de disparaître ... comme une attention particulière. Pas bon! Il aurait été moins mauvais d'afficher le clavier numérique à ce moment, mais non. Je suis donc revenu ici pour dire que mon si simple La solution n'est pas mobile conviviale, ce qui est une bonne raison de ne pas l'utiliser. J'ai vraiment essayé de répondre ... et j'ai complètement testé mon idée. S'il vous plaît ne pas savoir. ;) Juste pour l'enregistrement: pour l'instant et jusqu'à une meilleure solution, je supprimai simplement la valeur complètement sur la mise au point au lieu de la sélectionner ... car la valeur sera modifiée par l'utilisateur.
J'ai besoin d'une solution pour les utilisateurs mobiles / tablettes. C'est des iPads qui me causent le mal de tête. Cela semble être une idée créative mais est très hacky :)
Je déteste ce type d'entrée "numéro" !!! Quelle mauvaise idée des développeurs standard HTML5. La seule chose d'utilité de ce type d'entrée est le clavier numérique. La mauvaise chose est qu'il n'y a pas d'autre moyen de le déclencher. Doit subir les limitations telles que Maxlenght non prises en charge, les plus grands zéros s'effondrent sur le remplissage JavaScript ... et qu'en est-il de la vilaine SpinBox Personne n'utiliserait jamais! BTW, la solution que j'ai cachée cette chose est ici: @OBsidian: Votre question n'était-elle pas exactement sur la manière de pirater HTML pour obtenir le résultat recherché? ;)
@LOUYS Vous pouvez le déclencher avec INPUTMODE = "numérique". C'est la valeur par défaut pour le numéro de type, mais vous pouvez l'utiliser sur des champs de texte. Vérifiez-le dans ma réponse et dans la spécification: html.spec.whatswg.org/multipage/... & html.spec.whatwg.org/multipage/...
@Miguel: Intéressant! Je ne savais pas à propos de cet attribut ... qui semble être suggéré dans HTML 5.1. Bien sûr, cela ne fonctionne ni sur le navigateur Android ou le chrome pour Android. Je viens juste de l'essayer. J'ai trouvé cette info d'état cross-navigateur pour ce spécifique: wufoo.com/html5/ Attributs / 23-InpotMode.html
@Louys: merci beaucoup! Je ne connaissais pas le statut réel de la compatibilité, j'ai retouché la solution à l'aide de l'attribut de modèle ... J'espère que cela fonctionne maintenant (je ne peux toujours pas le vérifier)
Il est très facile de sélectionner un texte dans un droite de la chauve-souris, cette solution fonctionne pour ou Type = "Numéro" /> Code> Utilisation de JavaScript / jQuery strong>. Vous trouverez ci-dessous le code que j'utilise tout le temps lors de l'intégration du texte ou du numéro d'entrée.
Dans notre cas, le code Focus () code> & SELECT () CODE >; jQuery code>, mais afin de faire type = "Numéro" /> Code> ou jQuery code>. Cette solution fonctionne également bien sur Tap Events CODE> sur les périphériques mobiles. P> <input type="text" placeholder="Search" id="searchItem" onclick="this.focus();this.select()">
C'est le moyen standard de sélectionner du texte avec JavaScript. Cela fait partie du code de stock, mais cela ne fonctionnera pas sur des appareils Apple en raison des problèmes énoncés ci-dessus.
Le "SELECT / ECRIRE UN NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO DE NUMÉRO NUMÉRO PAS UN CLABOBOIRE NUMÉRICE SUR CERTATIQUES PARTICULTATS POUR DES CHAMBRES: quelque chose de différent comme l'augmentation et la diminution des déclencheurs pourrait rendre la sélection de texte indésirable. Cela n'affecte pas seulement le numéro de type: "SEstSelectorCe méthode s'applique uniquement aux entrées des types de texte, de recherche, d'URL, tél et de mot de passe" ( https://developer.mozilla.org/en/docs/web/api/htmlinputelement ), donc les dates et autres sont également affectés.
une approche très simple ( Peut-être que la solution pour cette affaire): Qu'en est-il de la création des champs souhaités "Texte" (la solution actuelle fonctionne-t-elle toujours) et à l'aide de "INPUTMODE = numérique" pour afficher l'appareil de l'entrée numérique? https: //html.spec.whatwg. org / multipage / formes.html # entrées-modalités: -L'apt-inpotmode-attribut p>
... et comme il n'est pas largement pris en charge, nous pourrions essayer d'attribuer le modèle d'attribuer Semble forcer le clavier numérique sur des iPads (pas de périphérique Apple à vérifier) motif = "[0-9] *" P>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="Select" type="text" pattern="[0-9]*" inputmode="numeric">
Ouais, j'allais fou essayer de trouver cette solution. Fondamentalement, vous devez réorganiser la mise au point des événements, puis cliquez sur, puis sur TouchStart.
Pour moi, il est toujours travaillé (dans une application Web réactive ánd une application hybride) pour simplement utiliser
$ (". ELEMENT '). ON (" Cliquez sur tap ", fonction () {Stuff ICI}); . Notez que l'utilisation de ".on" vous permet de combiner des événements, où des éléments tels que .Click seront obsolètes à un moment donné. - Si cela ne fonctionne pas, il y a toujours la possibilité d'utiliser.on ("touchend") outouchstart . J'espère que ça aide.