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

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").