Question

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

我们说我们有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>

在此代码中，双击有两个操作。

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

其次，当我双击标签时，光标（插入符号）会高亮显示该单词。在这种情况下，我想放置光标（插入符号）而没有高亮。

Answer 1

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

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

第一个问题是使用组件标签无法解决，而是更好地使用带有一些css技巧的输入来隐藏边框和背景。在这种情况下，有很多解决方案，如this

Answer 2

如果没有一些肮脏的解决方法，似乎无法实现。

这是使用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>

Answer 3

检查

 $("#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>

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

3 个答案: