Javascript 如何在单击图标时高亮显示可编辑的范围_Javascript_Jquery_Html

Javascript 如何在单击图标时高亮显示可编辑的范围

javascript jquery html

Javascript 如何在单击图标时高亮显示可编辑的范围,javascript,jquery,html,Javascript,Jquery,Html,我有两个跨度 <span contentEditable=true class="editspan"></span> <span class="pencilspan glyphicon glyphicon-pencil pull-right"></span> 我想要的是，当我点击pencilspan时，editspan的contentEditable区域应该高亮显示（输入框应该可见）。如何实现此目标？您应该尝试focus（）方法： $(docum

我有两个跨度

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

我想要的是，当我点击pencilspan时，editspan的contentEditable区域应该高亮显示（输入框应该可见）。如何实现此目标？

您应该尝试

focus（）

方法：

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

对于空量程问题，您可以按照以下步骤操作

如果您正在寻找切换，请尝试以下操作：

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


.编辑输入{
显示：无；
}
按钮
$（文档）.ready（函数（）{
$（文档）.on（'click'，'.pencilspan'，函数（）{
//var editInput=“”；
$（'.editspan.editInput'）.toggle（）；
});
});

查看addClass jQuery函数。显示您使用input的html代码。我不想使用input标记向editspan添加输入框。我已经有contentEditable=true标志，它自动为我提供了一个输入框。我只想突出显示内容可编辑区域A或强制单击编辑范围。我尝试了

$（'.editspan'）。单击（）

在pencilspan onlick函数中，但它不起作用。我不想使用输入标记向editspan添加输入框。我已经有contentEditable=true标志，它自动为我提供了一个输入框。我只想突出显示内容可编辑区域A或强制单击编辑范围。我尝试了

$（'.editspan'）。单击（）

在我的pencilspan onlick函数中，但它不起作用。非常感谢！这几乎是工作唯一的问题是如果我没有任何文本内跨这不工作，如果我有任何内跨它的工作<代码>文本起作用，但

不起作用work@lovesoftlayeraj我已经在答案中添加了一个链接，请检查一下。看起来不错，尽管还有一个小问题。这些跨度元素位于表列中。其中一列中的所有单元格都具有这些跨距。我注意到，无论我点击哪个铅笔图标，它都只会聚焦第一行列中的edtispan。知道为什么会有这种行为吗？我想要哪一行的铅笔图标我只点击那一行的editspan列必须是焦点我不想使用输入标签向editspan添加输入框。我已经有contentEditable=true标志，它自动为我提供了一个输入框。我只想突出显示内容可编辑区域A或强制单击编辑范围。我尝试了

$（'.editspan'）。单击（）在我的pencilspan onlick函数中，但它不起作用。@lovesoftlayeraj:请尝试此$（文档）。在（'click'，'.pencilspan'，函数（）{$（'.editspan input'）.focus（）；}）；
<!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>