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

我使用jQuery和Lettering.js将每个字母包含在<h1>中，并给它一个唯一的ID。我还在<h1>上设置了contenteditable=true，所以当我点击它时，我可以编辑文本。我将如何选择位于光标左侧或右侧的<span>元素，以便我可以将样式应用于该元素？如何使用Javascript或jQuery选择文字光标旁边的字母？

这里是我的代码

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

会很感激的任何帮助或建议！

来源

2011-01-06 Chris Armstrong

下面将在所有主要浏览器中工作：

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-07 00:14:30

将点击事件添加到由文字脚本创建的每个段落标记将会给你点击的元素。然后，您可以使用prev或next方法在被点击的字母之前或之后获取该字母。

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

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

来源

2011-01-06 22:46:40 sgriffinusa

这是伟大的感谢！如果我使用箭头键在文本中移动，会发生这种情况吗？所以，如果我点击，它会给我这封信，但如果我按下左键，它会移动插入符号并给我以前的信件？ – 2011-01-06 22:51:48

事实上，由于插入/光标总是在一个范围内，是否有可能获得它所在的当前范围的ID？ – 2011-01-06 22:52:54

这是另一个名为Rangy的图书馆，它可以为你工作。查看附加模块CSSClassApplierModule。它可以让你在类中包装选择样式。

来源

2011-01-06 23:08:49 Nazulu

谢谢，但我需要的样式适用于由Lettering.js创建的id – 2011-01-06 23:15:20

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

回答

相关问题