如何使用 Javascript 或 jQuery 选择文本光标旁边的字母？

发布于 2024-10-10 22:16:13 字数 889 浏览 2 评论 0原文

我使用 jQuery 和 Lettering.js 将每个字母包装在带有跨度的

中，并为其提供唯一的 ID。我还在

上设置了 `contenteditable=true`，这样当我单击它时，我就可以编辑文本。如何选择光标左侧或右侧的元素，以便我可以对其应用样式？

这是我的代码

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

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

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吻泪 2024-10-17 22:16:14

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

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/

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/

回复收藏 0 原文

心碎的声音 2024-10-17 22:16:14

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

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

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

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/

回复收藏 0 原文

梦与时光遇 2024-10-17 22:16:14

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

回复收藏 0 原文

~没有更多了~

关于作者

桃扇骨

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何使用 Javascript 或 jQuery 选择文本光标旁边的字母？

中，并为其提供唯一的 ID。我还在

上设置了 `contenteditable=true`，这样当我单击它时，我就可以编辑文本。如何选择光标左侧或右侧的元素，以便我可以对其应用样式？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如何使用 Javascript 或 jQuery 选择文本光标旁边的字母？

中，并为其提供唯一的 ID。我还在

上设置了 contenteditable=true，这样当我单击它时，我就可以编辑文本。如何选择光标左侧或右侧的 元素，以便我可以对其应用样式？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

上设置了 `contenteditable=true`，这样当我单击它时，我就可以编辑文本。如何选择光标左侧或右侧的元素，以便我可以对其应用样式？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。