Wie kann ich den Brief neben einem Textcursor mit Javascript oder jQuery wählen?

StackOverflow https://stackoverflow.com/questions/4620660

Frage

Ich bin mit jQuery und Lettering.js jeden Buchstaben in einem <h1> mit einer Spannweite wickeln und ihm eine eindeutige ID geben. Ich habe auch contenteditable=true auf dem <h1> so eingestellt, dass, wenn ich darauf klicke ich den Text bearbeiten kann. Wie würde ich das <span> Element auswählen, das entweder nach links oder rechts vom Cursor, so dass ich es Styling anwenden könnte?

Hier ist mein 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>

Würde wirklich schätzen jede Hilfe oder Beratung!

War es hilfreich?

Lösung

Im Folgenden wird in allen gängigen Browsern funktionieren: 

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

Hier ist ein anschauliches Beispiel: http://jsfiddle.net/BATGH/1/

Andere Tipps

ein Click-Ereignis der Absatz-Tags zu jedem Hinzufügen von dem Schriftzug Skript erstellt werden Sie das Element, das auf geklickt wurde. Dann können Sie entweder zurück oder http://jsfiddle.net/5n5vJ/

Hier ist eine andere Bibliothek namens Rangy , die für Sie arbeiten könnte. Überprüfen Sie das Zusatzmodul CSSClassApplierModule aus. Damit können Sie eine Auswahl in einer Klasse wickeln für das Styling.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top