3

我正在使用 jQuery 和 Lettering.js 将每个字母包装在<h1>一个 span 中，并给它一个唯一的 ID。我也设置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>

非常感谢任何帮助或建议！

4

3 回答 3

2

以下内容适用于所有主流浏览器：

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/

于 2011-01-07T00:14:30.367 回答
1

为刻字脚本创建的每个段落标签添加点击事件将为您提供被点击的元素。然后，您可以使用prev或next方法来获取单击的字母之前或之后的字母。

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

我设计了一个示例，该示例将显示前一封信的警报。http://jsfiddle.net/5n5vJ/

于 2011-01-06T22:46:40.673 回答
0

这是另一个名为Rangy的库，它可以为您工作。查看附加模块 CSSClassApplierModule。它允许您将选择包装在一个类中以进行样式设置。

于 2011-01-06T23:08:49.780 回答