Странное поведение выбора

Question

Мой 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); 
         }); 
    }); 
    

Вот весь мой HTML-файл: http://pastebin.com/acdiU623

Это трудно объяснить, так что я подготовил короткий фильм: http://www.youtube.com/watch?v=tVk4K70JO80

В несколько слов: когда я нажимаю левую кнопку мыши и удерживаю ее, чтобы выбрать текст/цифры и начать выбор из половины буквы/числа, хотя эта буква/номер не подсвечивается, она добавляется к выбору. Я должен начать точно выбирать. Это нормально с широкими буквами, но с такими буквами, как i, j или l.

Это второй пример моего фильма. Я нажал левую кнопку на 3/4 длины номера 5, хотя 5 не подсвечивается, он выбран.

Протестировано на FF и Opera.

Answer 1

Хорошо, просто попробовал это демо. и он работает безупречно. он даже работает на firefox. Просто проверенная опера и сафари, и она работает на обоих из них. Даже если я выбираю половину буквы или цифры, он просто возвращает выделенный текст, который ожидается, когда вы сделаете выбор.

попробуйте на новой веб-странице, хотя для тестирования. затем, когда он работает, и вы удовлетворены результатами, затем приступайте к внесению изменений в существующую страницу.

Его намного проще, чем ваш код. Это скрипт, кросс-браузер, чтобы получить текст, выбранный пользователем

<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

Надежда это помогает.

PK

Answer 2

Есть несколько различных граничных точек для выбора, который будет выглядеть так же пользователю. То, что вы видите, это, вероятно, разница между следующими, где | является границей выбор:

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

и

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

В обоих случаях, вызывая toString() на выбор даст вам тот же результат ("67").