jQuery Set position du curseur dans la zone de texte

comment définir la position du curseur dans un champ de texte en utilisant jQuery? J'ai un champ de texte avec le contenu, et je veux que les utilisateurs curseur soit positionné à une certaine compensés lorsqu'ils se concentrent sur le domaine. Le code devrait ressembler à ceci: 

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

à quoi ressemblerait la mise en œuvre de cette fonction setCursorPosition? Si vous aviez un champ texte avec le contenu abcdefg, cet appel aurait pour résultat que le curseur se positionne comme suit:: abcd* * / * * efg.

Java a une fonction similaire, setCaretPosition. Ne une méthode similaire existe pour le javascript?

mise à jour: j'ai modifié le code CMS pour travailler avec jQuery comme suit: 

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);
420
demandé sur Soul_man 0000-00-00 00:00:00

1 réponses

j'ai deux fonctions: 

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

alors vous pouvez utiliser setCaretToPos comme ceci: 

setCaretToPos(document.getElementById("YOURINPUT"), 4);

Live exemple avec un textarea et un input , illustrant l'utilisation de jQuery: 

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});
<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

à partir de 2016, testé et travaillant sur Chrome, Firefox, IE11, même IE8 (voir ce dernier ici ; Stack Snippets ne supporte pas IE8).

244
répondu