Est-il une connexion Internet Explorer de remplacement approuvé pour selectionStart et selectionEnd?

Trouver ce qui est sélectionné dans de vrais navigateurs est aussi simple que:

var range = {
  start: textbox.selectionStart,
  end: textbox.selectionEnd
}

Mais c'est à dire, comme d'habitude, il ne comprend pas. Quelle est la meilleure manière de croix-navigateur pour ce faire?

InformationsquelleAutor TALlama | 2008-10-24

internet-explorer javascript

22

Je vais poster cette fonction pour une autre fois, vu que cette question a obtenu lié à l'une de l'autre.

La suivante sera de faire le travail dans tous les navigateurs et traite de tous les nouveaux problèmes liés à la ligne sans sérieusement compromettre les performances. J'en suis arrivé à cette après certains toing et froing et maintenant, je suis assez convaincu que c'est le meilleur exemple de la fonction autour de.

Mise à JOUR

Cette fonction suppose que le textarea/input a le focus, de sorte que vous pouvez avoir besoin d'appeler le textarea du focus() méthode avant de l'appeler.
```
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
//Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
//Check if the start and end of the selection are at the very end
//of the input, since moveStart/moveEnd doesn't return what we want
//in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
var el = document.getElementById("your_input");
el.focus();
var sel = getInputSelection(el);
alert(sel.start + ", " + sel.end);
```
- Pouvons-nous avoir ce sous une non-virale de licence, ou même contribué à le domaine public? (c'est la voix de Ceux Qui se soucient des droits d'Auteur :-))
- Ah ok, je vois que vous avez déjà fait ça ici: code.google.com/p/rangy
- Eh bien, j'ai déplacé le textarea/sélection de l'entrée des trucs à la bibliothèque, car il fonctionne d'une manière complètement différente à partir des sélections dans le document: code.google.com/p/rangyinputs . Concernant la licence, quel est le problème avec la norme de Dépassement de Pile licence Creative Commons?
- Ok, bon à savoir. Re licence - c'est viral 🙂
- Juste assez. Je trouve les détails des licences de logiciels libres à confusion et terne, mais je comprends les principes généraux. Pour les trucs que je suis loin de donner, je serai heureux de licence dans n'importe quelle façon qui est la plus commode pour les utilisateurs.
- MIT est parfait, merci!
- Je ne suis pas en mesure d'obtenir la sélection correcte de début/fin des valeurs dans IE 6 à l'aide de votre fonction. Veuillez consulter jsfiddle.net/sandeepan_nits/qpZdJ/12 et laissez-moi savoir si cette fonction est vraiment bien testé?
- Je retourne 0,0 pour moi. Ai-je raté quelque chose?
- Nath: C'est très bien testé et fonctionne dans IE 5, 6, 7, 8 et 9. Aussi, éventuellement, IE 4, bien que je n'ai aucun moyen de tester cela. Êtes-vous sûr que le problème est avec cette fonction? Si elle l'est, pourrait vous simplifier le cas de test pour isoler le problème viens de cette fonction?
- Bas j'ai mis en place un autre violon ici jsfiddle.net/sandeepan_nits/VGxMM/4 avec une simple balise d'entrée et de l'appel de votre fonction sur le flou, mais ici aussi, il retourne incorrect dans le cas de IE 6.
- Nath: OK. Le problème n'est pas le getInputSelection() fonction elle-même. Le problème est que le temps que les blur événement se déclenche, la sélection a été détruit dans IE. Vous pouvez utiliser l'IE-seulement beforedeactivate événement au lieu d'obtenir la sélection avant il a été détruit: jsfiddle.net/rtdgN
- Bas convenu. votre fonction rochers! +1
- Cela ne fonctionne pas correctement pour moi dans IE8. Cependant, si je supprime toutes les lignes qui font référence à 'normalizedValue', il fonctionne très bien. J'ai aussi besoin d'ajouter " el.focus () " en haut de la section qui traite avec IE8. L'accent n'est pas nécessaire pour les autres navigateurs.
- Le normalizedValue choses est essentielle pour la manipulation des sauts de ligne correctement. Il est vrai que vous pourriez avoir besoin de se concentrer le textarea d'abord, mais qui est pris en charge par la fonction: je vais ajouter une note pour dire que. Pourriez-vous fournir un exemple de ce qu'il ne fonctionne pas sous IE 8?
InformationsquelleAutor Tim Down
7

IE de la Portée de la mise en œuvre est un slithy d'horreur. Il veut vraiment que vous utilisez le exécrable execCommand interface au lieu de tout ce qui concerne l'indexation dans le texte.

Il existe deux approches que je connais pour obtenir les indices et ils ont tous deux des problèmes. Le premier utilise la gamme.de texte comme dans votre exemple de code. Malheureusement gamme.texte a l'habitude de dépouiller attaque et de fuite des retours à la ligne, ce qui signifie que si le curseur de sélection, est au début d'une ligne autre que la première, beforeLength sera éteint par le nombre de retours à la ligne*2) les caractères et vous obtiendrez le mauvais texte sélectionné.

La deuxième approche consiste à utiliser la gamme.moveStart/Fin (sur un doublon de gamme), comme indiqué dans la réponse à cette question: Décalage de caractères dans Internet Explorer TextRange (cependant, comme vous êtes en utilisant un textarea parent, vous pouvez ignorer les choses à propos de nœud de l'enquête). Ce n'est pas le même problème, mais elle relève tous les indices que si les retours à la ligne sont simples LF caractères, même si textarea.la valeur et la portée.le texte sera de retour comme CRLF séquences! Si vous ne pouvez pas les utiliser directement à l'index dans le textarea, mais vous pouvez les fixer avec un tas de retour à la ligne de comptage ou tout simplement les cordes-remplacer tous les CRs de la valeur avant de l'utiliser.

InformationsquelleAutor bobince

Ma solution actuelle est verbeux et basé sur ce fil, mais je suis ouvert à de meilleures solutions.

function getSelection(inputBox) {
if ("selectionStart" in inputBox) {
return {
start: inputBox.selectionStart,
end: inputBox.selectionEnd
}
}
//and now, the blinkered IE way
var bookmark = document.selection.createRange().getBookmark()
var selection = inputBox.createTextRange()
selection.moveToBookmark(bookmark)
var before = inputBox.createTextRange()
before.collapse(true)
before.setEndPoint("EndToStart", selection)
var beforeLength = before.text.length
var selLength = selection.text.length
return {
start: beforeLength,
end: beforeLength + selLength
}
}

Cela a des problèmes avec de nouvelles lignes. Voir @bobince réponse à certaines informations sur ce sujet, et ma réponse pour la solution.

InformationsquelleAutor TALlama

De BootstrapFormHelpers

  function getCursorPosition($element) {
var position = 0,
selection;
if (document.selection) {
//IE Support
$element.focus();
selection = document.selection.createRange();
selection.moveStart ('character', -$element.value.length);
position = selection.text.length;
} else if ($element.selectionStart || $element.selectionStart === 0) {
position = $element.selectionStart;
}
return position;
}
function setCursorPosition($element, position) {
var selection;
if (document.selection) {
//IE Support
$element.focus ();
selection = document.selection.createRange();
selection.moveStart ('character', -$element.value.length);
selection.moveStart ('character', position);
selection.moveEnd ('character', 0);
selection.select ();
} else if ($element.selectionStart || $element.selectionStart === 0) {
$element.selectionStart = position;
$element.selectionEnd = position;
$element.focus ();
}
}

InformationsquelleAutor Atav32

Vous devez vous connecter pour publier un commentaire.