CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectorscaret
Chris Armstrong
Chris Armstrong

Reputation: 3625

How can I select the letter beside a text cursor with Javascript or jQuery?

I'm using jQuery and Lettering.js to wrap each letter in an <h1> with a span and give it a unique ID. I've also set contenteditable=true on the <h1> so when I click on it I can edit the text. How would I select the <span> element that is either to the left or right of the cursor, so I could apply styling to it?

Here's my code

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

Would really appreciate any help or advice!

Upvotes: 3

Views: 842

Answers (3)

Tim Down
Tim Down

Reputation: 324607

The following will work in all major browsers:

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

Here's a live example: http://jsfiddle.net/BATGH/1/

Upvotes: 2

Nazulu
Nazulu

Reputation: 359

Here's another library called Rangy which could work for you. Check out the additional module CSSClassApplierModule. It lets you wrap a selection in a class for styling.

Upvotes: 0

sgriffinusa
sgriffinusa

Reputation: 4221

Adding a click event to each of the paragraph tags created by the lettering script will give you the element that was clicked on. Then you can use either prev or next method to get the letter before or after the letter that was clicked.

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

I worked up an example that will show an alert with the previous letter. http://jsfiddle.net/5n5vJ/

Upvotes: 1

Related Questions