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

Question

I have 2 spans 我有2个跨度

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

and a js function 和一个js功能

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

What I want is when I click on pencilspan the contentEditable area of editspan should get highlighted(input box should be visible). 我想要的是当我点击pencilpan时，editspan的contentEditable区域应该突出显示（输入框应该是可见的）。 How can I achieve this? 我怎样才能做到这一点？

Answer 1

You should try focus() method : 你应该尝试focus()方法：

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

For empty span issue you can follow this link 对于空跨度问题，您可以点击此链接

Answer 2

Please try this might help you if you are looking for toggle: 如果您正在寻找切换，请尝试这可能会对您有所帮助：

<!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 个解决方案

解决方案1
1 已采纳 2016-04-15 06:49:52

解决方案2
0 2016-04-15 06:53:25

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-04-15 06:49:52

解决方案2 0 2016-04-15 06:53:25

解决方案1
1 已采纳 2016-04-15 06:49:52

解决方案2
0 2016-04-15 06:53:25