ちょうどすべて<a>タグ

Question

の終了後にカーソルを表示させるタグの範囲を特定するためのすべてのソリューションは、あなたがhttps://jsfiddle.net/s7fxy8jp/8/

をチェックしてもらえあり、私はフォーカスを設定」をクリックしたときになるように、タグの範囲を識別するための任意の解決策はありますTo Z Element "をクリックすると、すべてのタグの終わりの直後にカーソルが表示されます。表示されるカーソルの場合

HTML

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

CSS

div:focus { 
background-color: Aqua;} 

JS

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

Answer 1

、私はdivはcontentEditableでなければならないと考えています。属性onClickを変更して、スクリプトが有効にした後にのみ編集可能にすることができます。

編集可能になると、set the selectionを使用してカーソル位置を配置できます。

function cursorToEnd(el) { 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    // Note positioning after the last child works for your 
    // example but might not be the most robust option depending 
    // on your expected div contents. 
    range.setStartAfter(el.lastChild); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

document.getElementById('test').onclick = function() { 
    var e = document.getElementById('scripted'); 
    e.contentEditable = true; 
    cursorToEnd(e); 
}; 

jsFiddle

Answer 2

ここでは、これはですが、私は、テキストボックスにそのdiv要素を変換しておりませんので、あなたが最後にカーソルを表示することはできません。

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

 
function placeCaretAtEnd(el) { 
 
    el.focus(); 
 
    if (typeof window.getSelection != "undefined" 
 
      && typeof document.createRange != "undefined") { 
 
     var range = document.createRange(); 
 
     range.selectNodeContents(el); 
 
     range.collapse(false); 
 
     var sel = window.getSelection(); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
    } else if (typeof document.body.createTextRange != "undefined") { 
 
     var textRange = document.body.createTextRange(); 
 
     textRange.moveToElementText(el); 
 
     textRange.collapse(false); 
 
     textRange.select(); 
 
    } 
 
}

div:focus { 
 
    background-color: Aqua; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div tabindex="-1" id="scripted"><a>Element A (script-only focusable)</a><a>Element B (script-only focusable)</a></div> 
 
<div id="test">Set Focus To Element Z</div>