web-dev-qa-db-fra.com

Obtenir la position du curseur (en caractères) dans un champ de saisie de texte

Comment puis-je obtenir la position du curseur à partir d'un champ de saisie?

J'ai trouvé quelques morceaux via Google, mais rien à l'épreuve des balles.

Fondamentalement, quelque chose comme un plugin jQuery serait idéal, alors je pourrais simplement faire

$("#myinput").caretPosition()
javascriptjqueryhtml
194
MarkB29

Mise à jour plus facile:

Utilisez field.selectionStartexemple dans cette réponse .

Merci à @commonSenseCode pour l'avoir signalé.

Ancienne réponse:

Trouvé cette solution. Pas basé sur jquery mais il n’ya aucun problème à l’intégrer à jquery:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}
221
bezmax

Nice one, grand merci à Max.

J'ai intégré la fonctionnalité dans sa réponse à jQuery si quelqu'un souhaite l'utiliser.

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);
115
MarkB29

TRÈS FACILE

Réponse mise à jour

Utilisez selectionStart, il est compatible avec tous les principaux navigateurs .

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})
<input id="foobar" />

Mise à jour: Ceci ne fonctionne que si aucun type n'est défini ou que type = "text" sur l'entrée.

72
CommonSenseCode

Nous avons une solution très simple . Essayez le code suivant avec un résultat vérifié -

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

Je vous donne le fiddle_demo

26
Rajesh Paul

Il existe maintenant un plugin Nice pour cela: The Caret Plug)

Ensuite, vous pouvez obtenir la position avec $("#myTextBox").caret() ou la définir via $("#myTextBox").caret(position)

14
Jens Mikkelsen
   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);
14
George

Il y a quelques bonnes réponses publiées ici, mais je pense que vous pouvez simplifier votre code et ignorer la vérification du support inputElement.selectionStart: il n'est pas pris en charge uniquement sur IE8 et les versions antérieures (voir documentation ) qui représente moins de 1% de l'actuel tilisation du navigateur .

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}
10
pmrotule

Peut-être avez-vous besoin d'une plage sélectionnée en plus de la position du curseur. Voici une fonction simple, vous n'avez même pas besoin de jQuery:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

Supposons que vous souhaitiez l'appeler sur une entrée chaque fois qu'elle change ou que la souris déplace la position du curseur (dans ce cas, nous utilisons jQuery .on()). Pour des raisons de performances, il peut être judicieux d’ajouter setTimeout() ou de quelque chose comme Underscores _debounce() si des événements affluent:

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

Voici un violon si vous voulez l'essayer: https://jsfiddle.net/Dhaupin/91189tq7/

2
dhaupin