Comportement étrange de la sélection

Question

Mon code JS:

    function getSelectedText(){ 
     if(window.getSelection){ 
      select = window.getSelection().getRangeAt(0); 
        var st_span = select.startContainer.parentNode.getAttribute("id").split("_")[1]; 
        var end_span = select.endContainer.parentNode.getAttribute("id").split("_")[1]; 
        console.log(select.endContainer); 
        var ret_urn=[st_span,end_span]; 
        return ret_urn 
     } 
     else if(document.getSelection){ 
      return document.getSelection(); 
     } 

    } 
    $(document).ready(function() { 
     $("div#check_button button").click(function() { 
         var loc = getSelectedText(); 
         console.log(loc); 
         }); 
    }); 
    

Voici tout mon fichier html: http://pastebin.com/acdiU623

Il est difficile de l'expliquer, donc je préparé court-métrage: http://www.youtube.com/watch?v=tVk4K70JO80

Dans un quelques mots: lorsque j'appuie sur le bouton gauche de la souris et que je le garde enfoncé pour sélectionner du texte/des chiffres et commencer la sélection à partir de la moitié de la lettre/du numéro, cette lettre/numéro n'est pas surlignée. Je dois commencer la sélection avec précision. Il est correct avec des lettres larges, mais dur avec des lettres comme i, j ou l.

Ceci est un deuxième exemple de mon film. J'ai appuyé sur le bouton gauche sur 3/4 de la longueur du numéro 5, bien que 5 ne soit pas en surbrillance, il est sélectionné.

Testé sur FF et Opera.

Answer 1

Ok juste essayé cette démo. et cela fonctionne parfaitement. ça marche même sur Firefox. Il suffit de tester l'opéra et le safari et cela fonctionne aussi bien pour les deux. Même si je sélectionne la moitié d'une lettre ou d'un chiffre, cela renvoie simplement le texte surligné qui correspond à ce qui est attendu lorsque vous effectuez une sélection. Essayez-le sur une nouvelle page Web, mais seulement à des fins de test. Ensuite, lorsque cela fonctionne et que vous êtes satisfait des résultats, commencez à apporter des modifications à votre page existante.

C'est beaucoup plus simple que votre code. Ceci est un script inter-navigateur pour obtenir le texte sélectionné par l'utilisateur

<script language=javascript> 
function getSelText() 
{ 
    var txt = ''; 
    if (window.getSelection) 
    { 
     txt = window.getSelection(); 
      } 
    else if (document.getSelection) 
    { 
     txt = document.getSelection(); 
      } 
    else if (document.selection) 
    { 
     txt = document.selection.createRange().text; 
      } 
    else return; 
document.aform.selectedtext.value = txt; 
} 
</script> 
<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name=aform > 
<textarea name="selectedtext" rows="5" cols="20"></textarea> 
</form> 

http://www.codetoad.com/javascript_get_selected_text.asp

Hope this helps.

PK

Answer 2

Il y a des points limites multiples différents pour une sélection qui aura le même à l'utilisateur. Qu'est-ce que vous voyez est probablement la différence entre ce qui suit, où | est une limite de sélection:

<span>5</span><span>|6</span><span>7|</span><span>8</span> 

et

<span>5|</span><span>6</span><span>7</span><span>|8</span> 

Dans les deux cas, l'appel toString() sur la sélection vous donnera le même résultat ("67").