需要一個正常的光標，當點擊它時

從小提琴，纔有可能閃爍正常光標在文本元素Z（腳本僅可聚焦）代替背景顏色淺綠色的端部。

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();};

來源

2016-11-30 Soma

使它可編輯div – azad

你需要讓你的DIV的內容進行編輯，通過使用contenteditable財產。

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

這會讓你點擊一個閃爍的光標。不幸的是它被放置在線的開頭。您可以通過following the instructions here解決此問題。

這是你的Updated JSFiddle

來源

2016-11-30 05:16:43 xShirase

哇！非常感謝你。您的解決方案適用於我。還有一個請求，是否有任何解決方案來識別標籤範圍而不是文本範圍，以便當我點擊「將焦點設置到元素Z」時，光標將在所有標籤結束後閃爍。我更新了你的小提琴https://jsfiddle.net/s7fxy8jp/8/ – Soma

我更新了你的JavaScript功能激活屬性CONTENTEDITABLE，然後移動插入符結束的文本。文本只能從「將焦點設置到元素Z」的焦點進行編輯，否則，它仍然是普通的div。請注意，我用jQuery的更快的操作，該解決方案仍然可以使用純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); 
};

來源

2016-11-30 05:24:59 ntahoang

試試這個

的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;}

來源

2016-11-30 05:25:01 Sujithrao

需要一個正常的光標，當點擊它時

回答

相關問題