Как выбрать букву рядом с текстовым курсором с помощью Javascript или jQuery? - PullRequest
Новая
       4

Как выбрать букву рядом с текстовым курсором с помощью Javascript или jQuery?

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

Я использую jQuery и Lettering.js, чтобы обернуть каждую букву в <h1> с интервалом и присвоить ему уникальный идентификатор.Я также установил contenteditable=true на <h1>, поэтому, когда я нажимаю на него, я могу редактировать текст.Как бы я выбрал элемент <span>, расположенный слева или справа от курсора, чтобы я мог применить к нему стилизацию?

Вот мой код 

<head>

    <style media="screen" type="text/css">
        body {text-align: center}
    </style>

    <script src="scripts/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/lettering.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
             $("h1").lettering();
         });
    </script>

</head>

<body>

<h1 contenteditable="true" >Click me!</h1>

</body>

Был бы очень признателенлюбая помощь или совет!

Ответы [ 3 ]

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

Следующее будет работать во всех основных браузерах: 

function getCaretContainerElement() {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = sel.getRangeAt(0).commonAncestorContainer;
            return container.nodeType == 1 ? container : container.parentNode;
        }
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        return document.selection.createRange().parentElement();
    }
    return null;
}

var h1 = document.getElementById("foo");

h1.onkeyup = h1.onmouseup = function() {
    var caretContainerEl = getCaretContainerElement();
    if (caretContainerEl) {
        // Do stuff here
        alert(caretContainerEl.id);
    }
};

Вот живой пример: http://jsfiddle.net/BATGH/1/

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

Добавление события щелчка к каждому из тегов абзаца, созданного сценарием надписи, даст вам элемент, по которому был щелкнут Затем вы можете использовать метод prev или next , чтобы получить букву до или после буквы, по которой щелкнули. 

$(document).ready(function(){
    $("h1 p").click(function(){
        alert($(this).prev().html());
    });
});

Я разработал пример, который покажет предупреждение с предыдущим письмом. http://jsfiddle.net/5n5vJ/

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

Вот еще одна библиотека с именем Rangy , которая может работать для вас. Ознакомьтесь с дополнительным модулем CSSClassApplierModule. Это позволяет вам обернуть выделение в классе для стиля.

...