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'),
  beforeCompositionRange,
  selection = window.getSelection(),
  moveCaret = function () {
    var composition = document.getElementById('composition'),
      newRange = document.createRange();
    beforeCompositionRange = selection.getRangeAt(0);
    composition.classList.remove('hidden');
    composition.innerHTML = '';
    newRange.selectNodeContents(composition);
    newRange.collapse();
    selection.removeAllRanges();
    selection.addRange(newRange);
  },
  moveCaretBackChrome = function () {
    composition.innerHTML = '';
    composition.classList.add('hidden');
    selection.removeAllRanges();
    selection.addRange(beforeCompositionRange);
  },
  moveCaretBackFF = function () {
    // Firefox makes us copy the composed characters to be inserted.
    var composedCharacters = composition.innerHTML;
    composition.innerHTML = '';
    composition.classList.add('hidden');
    selection.removeAllRanges();
    selection.addRange(beforeCompositionRange);
    // execCommand is evil! In an actual editor one would here call whatever character insertion function one generally uses for each of the composed characters.
    document.execCommand('insertHTML', false, composedCharacters);
  };
editor.addEventListener('compositionstart',moveCaret);
// Chrome listens to the element where the composition takes place for the compositionend event.
composition.addEventListener('compositionend',moveCaretBackChrome);
// Firefox listens to the element where the composition started for the compositionend event.
editor.addEventListener('compositionend',moveCaretBackFF);
</script>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers