Définition (ou lecture) de la valeur de Cursor/Caret en HTML TextArea

Question

J'essaie (et j'échoue) d'implémenter un glisser & dans une zone de texte HTML.

Glisser & Le mécanisme de dépôt est relativement facile avec jQuery ou Scriptaculous (nous utilisons les deux), donc je suis prêt à accepter une réponse qui utilise l'une de ces deux méthodes.

Le problème est que je n'arrive pas à trouver un moyen de lire ou de définir le point d'insertion. Ce que je veux finalement être en mesure de faire est de déterminer l'emplacement de la goutte, faire un calcul mathématique pour déterminer où se trouve exactement la zone de texte, puis régler la position du curseur (ou le point d'insertion) et placer (insérer) a laissé tomber le texte là.

Je peux gérer les calculs, j'ai juste besoin de savoir comment diable lire et définir la position du curseur (qui sera finalement mon point d'insertion pour le texte abandonné). Est-ce seulement possible?

Merci -

Answer 1

J'ai travaillé cela en assemblant quelques extraits et des idées d'ici. Voici comment je l'ai résolu celui-ci:

1. J'ai placé chaque section du texte que je voulais faire draggable dans une durée avec une classe de « draggable_text »

2. jquery utilisé (dans le document fonction prête) pour sélectionner/désélectionner automatiquement le texte à l'intérieur de l'intervalle à chaque fois que le passage de la souris ou le passage de la souris a été déclenché.

.. voici le code:

$(document).ready (

    $('.draggable_text').mouseover(
     function() { 
      selectNode(this); 
     } 
    ); 

    $('.draggable_text').mouseout(
     function() { 
      clearSelection(this); 
     } 
    ); 

); 

function selectNode (node) { 
    var selection, range, doc, win; 
    if ((doc = node.ownerDocument) 
      && (win = doc.defaultView) 
      && typeof win.getSelection != 'undefined' 
      && typeof doc.createRange != 'undefined' 
      && (selection = window.getSelection()) 
      && typeof selection.removeAllRanges != 'undefined' 
     ) { 
     range = doc.createRange(); 
     range.selectNode(node); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } else if (document.body 
       && typeof document.body.createTextRange != 'undefined' 
       && (range = document.body.createTextRange())) { 
     range.moveToElementText(node); 
     range.select(); 
    } 
} 

function clearSelection() { 
    if (document.selection) { 
     document.selection.empty(); 
    } else if (window.getSelection) { 
     window.getSelection().removeAllRanges(); 
    } 
} 

Fait intéressant, en utilisant cette méthode, pas besoin d'être mis en œuvre glisser spéciaux & mécanismes de chute - il semble que le navigateur prend automatiquement lorsque vous faites glisser le texte sélectionné dans une zone de texte, que vous souhaitez copier là-bas. Parfait!

J'ai testé cela sur FF3, IE6 et IE7 (WinXP et Vista). Le graphique glisser/déposer était légèrement différent sur chacun, mais tout a fonctionné.

Answer 2

Je recommande de commencer avec la lecture sur l'objet Range dans JS, voir http://www.quirksmode.org/dom/range_intro.html

Answer 3

Puisque vous mentionnez que vous utilisez jQuery, je vous recommande de donner un coup d'oeil à la FieldSelection brancher. Ce plugin vous aidera à obtenir des informations sur l'emplacement actuel du curseur.

Pour régler la position du curseur, j'utilise les fonctions suivantes:

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); 
} 

Le vous pouvez utiliser la fonction setCaretToPos comme ceci:

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