H 5のcontenteditable

シーン:

<div id='content' contenteditable='true' >
  hello
</div>

<button id='caret'>      </button>

 
需要:ボタンをクリックして、挿入子をテキスト「hello」の後ろまたは前に置く.

//  
hello|

//  
|hello

メインストリームブラウザとの互換性
 
解決:

function placeCaret(el, atStart) {
  el.focus();

  if (typeof window.getSelection != 'undefined' && typeof document.createRange != 'undefined') { 

    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(atStart);

    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(atStart);
    textRange.select();
  }     
}

// true      ，false    
placeCaret( document.getElementById('content'), false );

 
参照先:http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser?lq=1