如何在 glyphicon click 上突出显示 contentEditable 跨度答案

【问题标题】：How to highlight a contentEditable span on glyphicon click如何在 glyphicon click 上突出显示 contentEditable 跨度
【发布时间】：2016-04-15 06:35:52
【问题描述】：

我有 2 个跨度

<span contentEditable=true class="editspan"></span>
<span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>

还有一个js函数

$(document).on('click', '.pencilspan', function () {
    console.log("clicked pencil");
});

我想要的是当我点击pencilspan时，editspan的contentEditable区域应该被突出显示（输入框应该是可见的）。我怎样才能做到这一点？

【问题讨论】：

看看addClass jQuery函数。
显示你使用输入的 html 代码
我不想用input标签给editspan添加输入框。我已经有了 contentEditable=true 标志，它会自动给我一个输入框。我只想突出显示内容可编辑区域a 或强制单击编辑范围。我在pencilspan onlick 函数中尝试了$('.editspan').click(); ，但没有成功。

标签： javascript jquery html

【解决方案1】：

你应该试试focus() 方法：

$(document).on('click', '.pencilspan', function () {
    $(this).siblings('.editspan').focus();
});

对于空跨度问题，您可以关注此link

【讨论】：

我不想用input标签给editspan添加输入框。我已经有了 contentEditable=true 标志，它会自动给我一个输入框。我只想突出显示内容可编辑区域a 或强制单击编辑范围。我在pencilspan onlick 函数中尝试了$('.editspan').click(); ，但没有成功。
非常感谢！这几乎可以工作，唯一的问题是，如果我在 span 内没有任何文本，这不起作用，如果我在 span 内有任何内容，它就可以工作。 <span contentEditable=true class="editspan">text</span> 有效，但 <span contentEditable=true class="editspan"></span> 无效
@lovesoftlayeraj 我在答案中添加了一个链接，请检查一下。
看起来不错，但还有一个小问题。这些跨度元素位于表格列中。其中一列中的所有单元格都具有这些跨度。而且我注意到无论我单击哪个铅笔图标，它都会将 edtispan 仅聚焦在第一行的列中。知道为什么会出现这种行为吗？我希望我点击的那一行的铅笔图标只有该行的 editspan 列必须被聚焦

【解决方案2】：

如果您正在寻找切换，请尝试这可能会对您有所帮助：

<!DOCTYPE html>
<html>
<head>
<style>
.editInput{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body>
<span contentEditable=true class="editspan">
<input type = 'text' value ='' class='editInput' />
</span>
<span class="pencilspan glyphicon glyphicon-pencil pull-right">button</span>
<script>
$(document).ready(function(){
  $(document).on('click', '.pencilspan', function () {
   // var editInput = "<input type = 'text' value ='' />";
    $('.editspan .editInput').toggle();

});
});
</script>
</body>
</html>

【讨论】：

我不想用input标签给editspan添加输入框。我已经有了 contentEditable=true 标志，它会自动给我一个输入框。我只想突出显示内容可编辑区域a 或强制单击编辑范围。我在pencilspan onlick 函数中尝试了$('.editspan').click(); ，但没有成功。
@lovesoftlayeraj: 请试试这个 $(document).on('click', '.pencilspan', function () { $('.editspan input').focus(); });