Question

我有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");
});

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

Answer 1

您应该尝试focus()方法：

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

对于空跨度问题，您可以按照此link

进行操作

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

如何在glyphicon点击上突出显示contentEditable span

2 个答案: