Почему получение выделенного текста из textarea работает, когда нажимается кнопка, а не когда нажимается «div» (в Internet Explorer) - PullRequest
Новая
       19

Почему получение выделенного текста из textarea работает, когда нажимается кнопка, а не когда нажимается «div» (в Internet Explorer)

1 голос
/ 25 августа 2011

Рассмотрим следующий код: ( Демо здесь - откройте в Internet Explorer 7 или 9 )

HTML: 

<textarea>Hello Stack Overflow</textarea>
<input class="a" type="button" value="Click here does the job" />
<div class="a">But clicking here not :(</div>

JS: 

    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};
}


function getselection() {
  var selectedText = getInputSelection($("textarea")[0]);
  var start = selectedText.start;
  var end = selectedText.end;
  alert("Start: " + start + ", End: " + end);
}

$(".a").click(getselection);

Функция getInputSelection() взята из здесь .

По какой-то причине при нажатии <div> результат всегда будет таким: 

Start: 0, End: 0

Есть идеи, как это исправить?

Ответы [ 2 ]

4 голосов
/ 25 августа 2011

Проблема в том, что нажатие <div> теряет фокус на текстовой области до выполнения функции getInputSelection().Есть две альтернативы:

  • Либо используйте вместо этого событие mousedown: http://jsfiddle.net/RbSLw/13/, или
  • Сделайте <div> невыбираемым (делается путем добавления unselectable="on"атрибут в IE): http://jsfiddle.net/RbSLw/14/.
2 голосов
/ 25 августа 2011

Ваша проблема вызвана проводником. Когда вы нажимаете на кнопку, фокус не теряется из поля ввода, но когда вы нажимаете на div, он удаляется и, следовательно, выделенный текст больше не выделяется.

То, что вы хотите сделать, - это найти способ преодолеть это, заставляя щелкать по элементу div, чтобы не убрать фокус с input.

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

Надеюсь, это помогло:)

...