2010-07-23 12 views
12

J'ai une boîte de dialogue jQuery permettant de créer des liens dans un intervalle contentEditable. Le problème est que le fait de cliquer sur un bouton pour ouvrir la boîte de dialogue entraîne la perte de la sélection, la saisie de texte dans la boîte de dialogue entraîne également la perte de la sélection.Préserver la sélection de texte dans contenteditable lors de l'interaction avec jQuery UI Boîte de dialogue et saisie de texte

Je peux réparer le bouton avec -moz-user-select: none; mais -webkit-user-select: aucun ne fonctionne dans Chrome.

Je peux corriger l'entrée en l'enveloppant dans un iframe, mais c'est compliqué et cliquer n'importe où ailleurs tue également la sélection, par exemple, en faisant glisser la boîte de dialogue.

J'ai vu la solution à How to preserve text selection when opening a jQuery dialog, mais cela ne fonctionne pas dans de nombreux navigateurs dans un élément contentable, seules les entrées réelles.

Y at-il une bonne solution à mon problème?

Répondre

25

Vous pouvez enregistrer et restaurer la sélection en utilisant des fonctions simples telles que les suivantes lorsque la boîte de dialogue est ouverte et fermée. Je ne suis pas assez familier avec les boîtes de dialogue jQuery pour connaître le mécanisme d'accrochage dans l'ouverture et la fermeture de la boîte de dialogue. La première, saveSelection, vous retourne un objet ou RangeTextRange que vous devez stocker dans une variable que vous passez plus tard restoreSelection:

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(); 
     } 
    } 
} 
+0

Comment pouvons-nous utiliser ces fonctions dans la pratique. Sur un élément div disons

test test
Hussein

+5

Merci Tim. Vous êtes le maître de la gamme! –

+0

J'ai utilisé l'événement selectionChange. Voir ici http://stackoverflow.com/questions/21730134 J'ai utilisé Dart mais vous devriez avoir l'idée. –