71 votes

Obtenir la position du signe d'insertion dans une entrée HTML ?

Comment obtenir l'index du signe d'insertion du texte dans une entrée ?

54voto

Caio Points 1156

-> sélectionDébut

<!doctype html>

<html>
  <head>
    <meta charset = "utf-8">

    <script type = "text/javascript">
      window.addEventListener ("load", function () {
        var input = document.getElementsByTagName ("input");

        input[0].addEventListener ("keydown", function () {
          alert ("Caret position: " + this.selectionStart);

          // You can also set the caret: this.selectionStart = 2;
        });
      });
    </script>

    <title>Test</title>
  </head>

  <body>
    <input type = "text">
  </body>
</html>

3 votes

Certes, l'écouteur devrait être enregistré au moment de l'ouverture de la touche et il ne gère pas les nouvelles lignes (textarea), mais il fait exactement ce qui a été demandé dans les navigateurs modernes.

0 votes

Vous avez également besoin de la direction de sélection de l'entrée pour obtenir la position du curseur lorsque la direction de sélection est inversée.

0 votes

@inta existe-t-il un moyen pratique de détecter ou d'anticiper la sélection réelle sur le site de l keydown événement si un ou plusieurs caractères sont mis en évidence ou sélectionnés ? selectionStart !== selectionEnd devrait faire l'affaire

32voto

Tim Down Points 124501

Ce qui suit vous permettra d'obtenir le début et la fin de la sélection sous forme d'indices de caractères. Elle fonctionne pour les entrées de texte et les zones de texte, et est légèrement compliquée en raison de la gestion étrange des sauts de ligne par IE.

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

var textBox = document.getElementById("textBoxId");
textBox.focus();
alert( getInputSelection(textBox).start );

0 votes

@NadavB : Êtes-vous sûr que la valeur que vous passez dans la fonction est un élément DOM input ou textarea ?

1 votes

@TimDown c'est un contenu éditable div. Est-ce que cela devrait fonctionner aussi ?

2 votes

@NadavB : Non. Voici un équivalent approximatif pour contenteditable : stackoverflow.com/a/4812022/96100

9voto

Jens Mikkelsen Points 1581

Il existe désormais un plugin jQuery très utile pour cela : Plugin Caret

Ensuite, vous pouvez simplement appeler $("#myTextBox").caret();

7voto

Pandincus Points 5785

Nous avions utilisé quelque chose comme ça pour une ancienne application javascript, mais je ne l'ai pas testé depuis quelques années :

function getCaretPos(input) {
    // Internet Explorer Caret Position (TextArea)
    if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        var bookmark = range.getBookmark();
        var caret_pos = bookmark.charCodeAt(2) - 2;
    } else {
        // Firefox Caret Position (TextArea)
        if (input.setSelectionRange)
            var caret_pos = input.selectionStart;
    }

    return caret_pos;
}

1 votes

Il semble qu'il y ait un décalage constant de 21 caractères dans IE. Avec un ajustement, cela semble correct, mais c'est inexact dans FF. http://jsfiddle.net/zqNpV/

2voto

Bathri Nathan Points 601

Exemple de travail pour obtenir le point du curseur dans la zone de texte :

function textbox()
{
    var ctl = document.getElementById('Javascript_example');
    var startPos = ctl.selectionStart;
    var endPos = ctl.selectionEnd;
    alert(startPos + ", " + endPos);
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X