Comment obtenir le texte sélectionné/position du curseur d'une entrée qui n'ont pas d'accent?

Est-il possible d' (fiable) d'obtenir le texte sélectionné/position du curseur dans une zone de texte d'entrée si ce champ n'est pas focus?

Si non, quelle est la meilleure façon d'obtenir et de conserver ces données?

En gros, quand un utilisateur clique sur un bouton, je veux insérer du texte à la position du curseur. Cependant, dès que l'utilisateur clique sur ce bouton, le champ perd le focus et je perds la position du curseur.

InformationsquelleAutor mpen | 2011-03-01
  1. 9

    Le script suivant va tenir la position du curseur, puis un clic sur un bouton permettra d'insérer du texte à la position enregistrée:

    Javascript:

    <script type="text/javascript">
//Gets the position of the cursor
function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

function InsertText() {
    var textarea = document.getElementById('txtArea');
    var currentPos = getCaret(textarea);
    var strLeft = textarea.value.substring(0,currentPos);
    var strMiddle = "-- Hello World --";
    var strRight = textarea.value.substring(currentPos,textarea.value.length);
    textarea.value = strLeft + strMiddle + strRight;
}
</script>

    HTML:

    <textarea id="txtArea" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button onclick="InsertText();">Insert Text</button>

    Le script peut être modifié si vous voulez tenir la position du curseur dans une variable onblur.

    • m'a fallu un certain temps pour le faire fonctionner, mais il ne semble pas workin FF et IE jsfiddle.net/EDWw8
    • Travaille dans Chrome9 et IE9 trop. Du bon travail. Puisque vous n'avez pas accepté la réponse, est-il autre chose que vous essayez de faire?
    • Nous allons vous impatientez pas. Alex solution est parfaitement viable, trop, et il semble être plus robuste. Je vais accepter une réponse une fois que je le mettre en œuvre et de décider ce qui fonctionne réellement mieux pour moi.
    • Cela a été d'une grande aide. J'avais besoin de patch un problème dans Rangyinputs où IE9 n'était pas la cueillette jusqu'à la position du curseur. Maintenant j'ai besoin de comprendre comment soumettre un patch pour eux.
    • cette réponse n'a toujours pas été acceptée. ça fait deux ans. ce qui donne?
    • si el.selectionStart === 0, ce qui tout à fait valable, ce code va échouer

    InformationsquelleAutor NakedBrunch
  2. 4

    Utiliser les 2 fonctions pour enregistrer et restaurer la sélection de texte.

    function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

    Vérifier exemple de Travail à http://jsfiddle.net/LhQda/

    Tapez quelque chose dans la TEXTAREA, puis cliquez en dehors de la TEXTAERA à perdre de la sélection, puis cliquez sur le bouton accent à la restauration de sélection et de se concentrer de nouveau.

    • Vous vous rendez compte que votre code ne fait absolument rien, et ne fonctionne pas dans IE droit? saveSelection retourne la sélection, que vous n'avez pas stocké dans une variable ou quoi que ce soit, et restoreSelection prend un range en tant que paramètre dans laquelle vous avez passé de rien. Votre exemple de travaux en FF FF ne pas perdre la position du curseur par défaut. IE (et peut-être d'autres navigateurs) faire.
    • Je ne savais pas que. Dans votre question, vous avez dit que vous vouliez get selected text/caret position of an input that doesn't have focus?. Le code vous donne à la fois l'accent et le texte sélectionné.
    • je n'ai pas vraiment envie/besoin de concentrer l'élément, qui est facile à faire, j'ai juste besoin de positions, qui sont aussi faciles à obtenir. le problème, c'est lorsque l'élément est de se concentrer, les positions ne sont pas récupérables dans certains navigateurs. je pense cependant, que simplement se concentrer le champ avant en essayant d'obtenir les positions pourrait résoudre le problème, mais je ne sais pas si c'est fiable correctif. Je ne vois pas comment votre window.getSelection serait utile s'il existe plusieurs entrées sur la page, en supposant qu'il attrape ce que...le dernier texte sélectionné?
    InformationsquelleAutor Hussein