js positionne le curseur à la position spécifiée de la zone de saisie pour partager un exemple

Lors de la fourniture d'une interface utilisateur conviviale, il est souvent nécessaire de positionner le curseur à la position spécifiée de la zone de saisie. Généralement la queue, afin que l'utilisateur puisse continuer à saisir des informations. Nous pouvons utiliser javascript pour faire fonctionner dom Voici la méthode d'implémentation

   function changeCursor(input, position) {   
2.             var range = input.createTextRange();   
3.             range.collapse(true);   
4.             range.moveStart('character', position);   
5.             range.select();   
6.       }  
7.       //在需要的地方调用此函数，比如 
8.       onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) {  
      var range = input.createTextRange();  
      range.collapse(true);  
      range.moveStart('character',position);  
      range.select();  
}

. //Appelez cette fonction si nécessaire, par exemple

onfocus="positionCursor(this,this.length)"

où createTextRange crée un objet TextRange

pour l'élément

Le tableau suivant répertorie les propriétés et méthodes de l'objet TextRange De plus, vous pouvez vous référer à . w3c Documentation pour
MéthodeDescription
compareEndPoints  : Comparer TextRange Le point final de l'objet et les points finaux des autres plages.
duplicata  : renvoie une copie de TextRange .
execCommand  : Exécute la commande sur le document actuel, la sélection actuelle ou une plage donnée.
développer  : Développez la plage pour inclure complètement la plage de l'unité spécifiée.
findText  : recherchez du texte dans le texte et définissez les points de début et de fin de la plage pour entourer la chaîne de recherche.
getBookmark : obtient le signet qui peut être utilisé pour que moveToBookmark renvoie la même plage de signets (Chaîne de fond blanc).
getBoundingClientRect : Obtient l'objet lié à la collection d'objets TextRectangle spécifiée.
getClientRects : Obtenir une collection de rectangles décrivant le contenu de l'objet ou la disposition dans la zone client. Chaque rectangle décrit une ligne droite.
inRange  : Indique si une plage est contenue par une autre plage.
isEqual  : Indique si la plage spécifiée est égale à la plage actuelle.
déplacer  : Réduit la plage de texte donnée et déplace la plage vide du nombre d'unités donné.
moveEnd : Modifier la position finale de la plage.
moveStart  : Change la position de départ de la plage.
moveToBookmark : Déplacer vers le signet.
moveToElementText : Déplace la plage de texte de sorte que les positions de début et de fin de la plage contiennent entièrement le texte de l'élément donné.
moveToPoint  : Déplacez les positions de début et de fin de la plage de texte vers le point donné.
parentElement  : récupère l'élément parent de la plage de texte donnée.
pasteHTML  : Collez le texte HTML dans la plage de texte donnée, en remplaçant tout texte précédent dans la plage et Élément HTML .
queryCommandEnabled : Renvoie si la commande spécifiée peut être utilisée dans l'état actuel du document donné execCommand Valeur booléenne pour une exécution réussie de la commande.
queryCommandIndeterm  : renvoie une valeur booléenne indiquant si la commande spécifiée est dans un état ambigu.
queryCommandState  : renvoie une valeur booléenne indiquant l'état actuel de la commande.
queryCommandSupported : Renvoie une valeur booléenne indiquant si la commande actuelle est prise en charge dans les paramètres régionaux actuels. .
queryCommandValue : Renvoie la valeur actuelle du document, de la plage ou de la région actuellement sélectionnée pour la commande donnée.
scrollIntoView : fait défiler l'objet dans la plage visible, en le disposant en haut ou en bas de la fenêtre.
select  : Définissez la zone de sélection actuelle comme objet actuel.
setEndPoint : Définit le point final d'une plage en fonction des points finaux d'autres plages.

PropriétéDescription
boundingHeight : Obtenir la liaison TextRange La hauteur du rectangle de l'objet.
boundingLeft  : Récupère le bord gauche du rectangle de l'objet TextRange englobant et le contenant TextRange La distance entre les côtés gauches des objets.
boundingTop  : récupère le bord supérieur de l'objet TextRange de délimitation et contient le TextRange La distance entre les bords supérieurs des objets.
boundingWidth ：Récupère la largeur du rectangle qui délimite l'objet TextRange.
htmlText ：Obtenir la liaisonTextRange La largeur du rectangle de l'objet.
offsetLeft  : Obtient la position gauche calculée de l'objet par rapport à la mise en page ou aux coordonnées parent spécifiées par l'attribut offsetParent .
offsetTop  : obtient la position supérieure calculée de l'objet par rapport à la mise en page ou aux coordonnées parent spécifiées par l'attribut offsetTop .
texte  : Définir ou obtenir le texte contenu dans la plage.

Recommandations associées :

Comment résoudre l'affichage incohérent de la taille du curseur dans la zone de saisie

Utilisez CSS pour masquer la méthode du curseur de saisie

Détails du code du curseur de la zone de texte personnalisée JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!