如何通過雙擊操作將光標（插入符號）放入標籤中？

如果您單擊一個「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個用於雙擊的操作。

首先，當我雙擊標籤時，光標（插入符號）移動到最前面。在這種情況下，我想將光標（插入符號）放在發生點擊事件的正確字母表處。

第二，當我雙擊標籤時，光標（插入符號）確實高亮該單詞。在這種情況下，我想將光標（插入符號）不加亮。

來源

2016-06-08 Jinny Song

也許這解決您的第二個問題https://jsfiddle.net/543q8smz/

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

第一個問題是不可解的使用組件標籤，反而是更好的用一些CSS技巧來隱藏bo rder和背景。在這種情況下，有很多解決方案，如this

來源

2016-06-08 11:24:09

這的jsfiddle代碼是什麼exatly我一直在尋找。但是，這不適用於我的電腦。我不知道爲什麼。你可以請檢查下面的代碼。 –

\t \t \t \t \t嘿，我剛認識你，這是瘋了。但是，這是我的號碼，也許我打電話。 –

而這個代碼只是IE的作品。我可以運行此代碼在Chrome瀏覽器？ –

-1

入住這

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

來源

2016-06-08 11:06:13 user6144292

沒有一些骯髒的解決方法，它似乎是不可能實現的。

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

來源

2016-06-08 14:43:52

如何通過雙擊操作將光標（插入符號）放入標籤中？

回答

相關問題