Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <style>
  #composition {
    border: 1px solid red;
  }
  #editor {
    border: 1px solid black;
    min-height: 150px;
  }
  .hidden {
    display: none;
  }
  </style>
</head>
<body>
<div id="editor" contenteditable="true" ></div>
<div id="composition" contenteditable="true" class="hidden"></div>
<script>
var editor = document.getElementById('editor'),
  moveCaret = function () {
    var composition = document.getElementById('composition'),
      selection = window.getSelection(),
      oldRange = selection.getRangeAt(0),
      newRange = document.createRange(),
      moveCaretBack = function () {
        composition.removeEventListener('compositionend',moveCaretBack);
        composition.innerHTML = '';
        composition.classList.add('hidden');
        selection.removeAllRanges();
        selection.addRange(oldRange);
      };
    composition.classList.remove('hidden');
    composition.innerHTML = '';
    newRange.selectNodeContents(composition);
    newRange.collapse();
    selection.removeAllRanges();
    selection.addRange(newRange);
    composition.addEventListener('compositionend',moveCaretBack);
  };
editor.addEventListener('compositionstart',moveCaret);
</script>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers