如何通过双击操作将光标（插入符号）放入标签中？

Question

如果您单击一个“contenteditable”标签，光标（插入符号）会自动放置在鼠标点击的正确位置。与此相同，我只想在用户双击标签区域时将光标（插入符号）放置在所单击的位置。

比方说，我们有像下面的HTML。

<label id="label_1" contenteditable="false" 
    ondblclick="doubleClick(document.getElementById('label_1'))"> 
    Hey, I just met you and this is crazy. But, here's my number and call 
    me maybe. 
    </label> 

而javascriptlike如下。

<script> 
    function doubleClick(elem) { 
     elem.setAttribute("contenteditable", "true"); 
     elem.focus(); 
    } 
    </script> 

在此代码中，有2个用于双击的操作。

首先，当我双击标签时，光标（插入符号）移动到最前面。在这种情况下，我想将光标（插入符号）放在发生点击事件的正确字母表处。

第二，当我双击标签时，光标（插入符号）确实高亮该单词。在这种情况下，我想将光标（插入符号）不加亮。

Answer 1

也许这解决您的第二个问题https://jsfiddle.net/543q8smz/

$(document).ready(function() { 
    document.getElementById('label_1').onselectstart = function() { return false; } 
}); 

第一个问题是不可解的使用组件标签，反而是更好的用一些CSS技巧来隐藏bo rder和背景。在这种情况下，有很多解决方案，如this

Answer 2

入住这

$("#label_1").dblclick(function doubleClick(elem) { 
 
     $(this).attr("contenteditable", "true"); 
 
     $(this).focus(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="label_1" contenteditable="false"> 
 
    Hey, I just met you and this is crazy. But, here's my number and call 
 
    me maybe. 
 
    </label>

Answer 3

没有一些肮脏的解决方法，它似乎是不可能实现的。

这是使用mousedown代替dblclick的解决方案之一：

var waiting = false; 
 

 
$('#label_1').mousedown(function(e){ 
 
    if(waiting && $(this).attr("contenteditable") !== 'true'){ 
 
    $(this).attr("contenteditable", "true").focus(); 
 
    return false; 
 
    } 
 
    waiting = true; 
 
    setTimeout(function(){waiting = false;}, 500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<label id="label_1" contenteditable="false"> 
 
    Hey, I just met you and this is crazy. But, here's my number and call 
 
    me maybe. 
 
</label>