jQuery: триггерная клавиша только в определенном div - PullRequest
Новая
       19

jQuery: триггерная клавиша только в определенном div

0 голосов
/ 07 января 2011

У меня есть страница с парой элементов DIV. Когда пользователь нажимает комбинацию клавиш CTRL + ENTER, мне нужно отобразить (с помощью alert ()) текст, который пользователь выбрал ранее. Я нашел решение , и оно работает как брелок, но осталась еще одна вещь.

Мне нужно сделать триггер события, только когда выделенный текст находится внутри DIV с классом "main_content". Я пытался присвоить keyup для $ ('DIV.main_content'), но это не работает.

Есть ли способ вызвать событие, только если выделен текст внутри $ ('DIV.main_content')?

Вот рабочий код, который срабатывает на весь документ: 

// Get user selection text on page
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.selection) {
        return document.selection.createRange().text;
    }
        return '';
}

$(document).ready(function(){
    $(document).keydown(function(e) {
        if(e.which == 13 && e.ctrlKey) {
        alert(getSelectedText());
        return false;
        }
    });
});

См. Код с разметкой в ​​jsFiddle

Ответы [ 2 ]

3 голосов
/ 07 января 2011

В функции getSelectedText() есть ошибка: window.getSelection() возвращает объект Selection, а не строку.Факт, что вы передаете результат этого в alert(), маскирует это, потому что alert() неявно преобразует передаваемый ему аргумент в строку.в элементе <div> с определенным классом.Работает во всех основных браузерах.

Живой пример: http://www.jsfiddle.net/cVgsy/1/

// Get user selection text on page
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    }
    else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

function isSelectionInDivClass(cssClass) {
    var selContainerNode = null;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            selContainerNode = sel.getRangeAt(0).commonAncestorContainer;
        }
    } else if (document.selection && document.selection.type != "Control") {
        selContainerNode = document.selection.createRange().parentElement();
    }
    if (selContainerNode) {
        var node = selContainerNode;
        while (node) {
            if (node.nodeType == 1 && node.nodeName == "DIV" && $(node).hasClass(cssClass)) {
                return true;
            }
            node = node.parentNode;
        }
    }
    return false;
}

$(document).ready(function(){
    $(document).keydown(function(e) {
        if(e.which == 13 && e.ctrlKey && isSelectionInDivClass("main_content")) {
            alert(getSelectedText());
            return false;
        }
    });
});
0 голосов
/ 07 января 2011

Это интересный вопрос.У меня есть следующая идея: вам нужно поймать событие mouseup на div.Например:

Итак, в вашем случае вы можете сделать что-то вроде этого: 

var selectedText = "";
$(".yourdiv").mouseup(function(){
 if (window.getSelection) 
   selectedText = window.getSelection();

 else if (document.selection) 
    selectedText = document.selection.createRange().text;

     alert(selectedText)

});

И переменная selectedText будет хранить выделенный текст.

...