How can I place a cursor(caret) into a label by double-click action?

Question

If you click a label which is 'contenteditable', a cursor(caret) automatically place in the right place where the mouse was clicked. Same like this, I just want to place the cursor(caret) at the clicked place when user DOUBLE-CLICK the label area.

Let's say we have html like below.

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

And the javascriptlike below.

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

At this code, there are 2 action for Double-Click.

First, when I double click the label, the cursor(caret) moves to the very front side. In this case, I want to place the cursor (caret) at the very right alphabet where the click event happend.

Second, when I double click the label, the cursor(caret) do hightlight the word. In this case, I want to place the cursor (caret) without hightligh.

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

maybe this solve your second problem https://jsfiddle.net/543q8smz/

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

The first question is not solvable using the component label, instead is better to use the input with some css tricks to hide the border and the background. There are in this case a lot of solution like this

edited May 23 '17 at 12:15

Community

1
1

answered Jun 08 '16 at 11:24

giuseppe straziota

443
2
7

This JSFiddle code is exatly what I was looking for. However, this doesn't work for my computer. I have no idea why. Can you please check around below code. – Jinny Song Jun 09 '16 at 01:31
Hey, I just met you and this is crazy. But, here's my number and call me maybe. – Jinny Song Jun 09 '16 at 01:34
And this code is just works with IE. Can I run this code in Chrome browser? – Jinny Song Jun 09 '16 at 01:53
Hi Jinny, the code, in my case works on chrome (I've used chrome and its console to test it). I've noted, anyway, that there are two ids, label_1 and textbox_1, I think you have to change the id in the function ready. – giuseppe straziota Jun 09 '16 at 07:48

Artur Filipiak · Answer 2 · 2016-06-08T14:54:46.460

Without some dirty workarounds, it seems to be impossible to achieve.

This is one of the solutions using mousedown instead of 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>

score -1 · Answer 3 · edited Jun 08 '16 at 15:48

-1

Check this

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

edited Jun 08 '16 at 15:48

Manish

247
1
10

answered Jun 08 '16 at 11:06

user6144292

163
5

How can I place a cursor(caret) into a label by double-click action?

3 Answers3