Need a normal cursor into a div when click on it

Question

I have prepared a Fiddle, please look into this.

From the fiddle, would it be possible to blink normal cursor at the end of the text Element Z (script-only focusable) instead of a background color aqua.

HTML

<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

CSS

div:focus {
background-color: Aqua;}

JavaScript

document.getElementById('test').onclick = function () {
document.getElementById('scripted').focus();};

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

You need to allow your div content to be edited, by using the contenteditable property.

<div tabindex="-1" id="scripted" contenteditable="true">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

This will get you a blinking cursor on click. Unfortunately it is placed at the beginning of the line. You can solve this problem by following the instructions here.

Here's your Updated JSFiddle

edited May 23 '17 at 12:08

Community

1
1

answered Nov 30 '16 at 05:16

xShirase

11,975
4
53
85

Wow!!! Great thank you very much. Your solution works for me. One more request , is there any solution to identify tag range instead of text range so that when I click on "Set Focus To Element Z", the cursor will blink on just after the end of all tag. I have updated your fiddle https://jsfiddle.net/s7fxy8jp/8/ – Soma Nov 30 '16 at 06:53

score 0 · Answer 2 · answered Nov 30 '16 at 05:24

I updated your JavaScript function to activate attribute contenteditable, then move caret to end of text. The text can only be edited when it is focus from "Set focus to element Z", otherwise, it is still a normal div. Note that I used jQuery for faster manipulation, the solution can still be implemented using pure JavaScript

JavaScript

document.getElementById('test').onclick = function () {
    var char, sel,
        $div = $('#scripted'),
        div = $('#scripted')[0];
    $div.attr('contenteditable', 'true');
    $div.focus().blur(function() {
        $div.attr('contenteditable', 'false')
    });
        char = $div.html().length; // character at which to place caret  content.focus();
    sel = window.getSelection();
    sel.collapse(div.firstChild, char);
};

score 0 · Answer 3 · answered Nov 30 '16 at 05:25

0

Try this

Html

<div tabindex="-1" id="scripted" class="sj">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Css :

.sj:hover {background: yellow;}

answered Nov 30 '16 at 05:25

Sujithrao

789
3
12
27

Need a normal cursor into a div when click on it

3 Answers3