marijnh · April 16, 2016 20:02
diff --git a/test.html b/test.html
 <!doctype html>

 <div contenteditable=true style="border: 1px solid black">Foo bar</div>

 <p>Put the cursor at the start of the editable content above, so
 that the keyboard is in uppercase mode. Then press <button>this
 button</button> to move the cursor to the end of 'foo'. Note that the
 keyboard stays in uppercase mode althrough lowercase would be
 appropriate for the new context.</p>

 <script>
 document.querySelector("button").addEventListener("mousedown", function(e) {
  e.preventDefault()
  var s = getSelection(), r = document.createRange()
  var para = document.querySelector("div")
  r.setEnd(para.firstChild, 3)
  r.setStart(para.firstChild, 3)
  s.removeAllRanges()
  s.addRange(r)
 })
 </script>
	<!doctype html>

	<div contenteditable=true style="border: 1px solid black">Foo bar</div>

	<p>Put the cursor at the start of the editable content above, so
	that the keyboard is in uppercase mode. Then press <button>this
	button</button> to move the cursor to the end of 'foo'. Note that the
	keyboard stays in uppercase mode althrough lowercase would be
	appropriate for the new context.</p>

	<script>
	document.querySelector("button").addEventListener("mousedown", function(e) {
	e.preventDefault()
	var s = getSelection(), r = document.createRange()
	var para = document.querySelector("div")
	r.setEnd(para.firstChild, 3)
	r.setStart(para.firstChild, 3)
	s.removeAllRanges()
	s.addRange(r)
	})
	</script>