beccasaurus/contenteditable.html

## contenteditable.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      function write() {
        var $out = $("#output");
        $out.text($out.text() + "\n" + JSON.stringify(arguments));
      }

      // http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity
      function setEndOfContenteditable(contentEditableElement)
      {
          var range,selection;
          if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
          {
              range = document.createRange();//Create a range (a range is a like the selection but invisible)
              range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
              range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
              selection = window.getSelection();//get the selection object (allows you to change selection)
              selection.removeAllRanges();//remove any selections already made
              selection.addRange(range);//make the range you have just created the visible selection
          }
          else if(document.selection)//IE 8 and lower
          {
              range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
              range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
              range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
              range.select();//Select the range (make it the visible selection
          }
      }

      $(document).ready(function(){
        write("document ready");

        $("#items .item .cursor").focus(function(){
          write("focus item cursor, item:", $(this).closest(".item").text());
        });

        $("#items .item .text").keypress(function(e){
          write("TEXT keypress: ", e.keyCode, e.shiftKey, e.ctrlKey, e.altKey);
          if (13 == e.keyCode) { // enter - no newlines supported in this example
            $(this).blur();
          }
        });

        $("#items .item .cursor").keypress(function(e){
          write("CURSOR keypress: ", e.keyCode, e.shiftKey, e.ctrlKey, e.altKey);
          if (13 == e.keyCode) { // enter
            var $text = $(this).siblings(".text").focus();
            setEndOfContenteditable($text[0]);
          }
          return false;
        });
      });
    </script>
    <style>
      .cursor:focus {
        border: 2px solid red;
      }
      [contenteditable=true]:hover {
        outline: 2px solid #09ACE6;
      }
      [contenteditable=true]:focus {
        outline: 2px solid #036689;
      }
    </style>
  </head>
  <body>
    <ul id="items">
      <li class="item">
        <span class="text" contenteditable="true" tabindex="-1">first</span>
        <!--
          By putting the "cursor" after the contenteditable, you can tab out
          of the contenteditable field and the same item's cursor will now be
          focused, allowing for the user to press Enter (to edit the same item again),
          or press any keyboard shortcuts to send the the current item, or tab
          to move to the next item!

          Ctrl-
        -->
        <span class="cursor" tabindex="1"></span>
      </li>
      <li class="item">
        <span class="text" contenteditable="true" tabindex="-1">second</span>
        <span class="cursor" tabindex="2"></span>
      </li>
      <li class="item">
        <span class="text" contenteditable="true" tabindex="-1">third</span>
        <span class="cursor" tabindex="3"></span>
      </li>
    </ul>
    <pre id="output"></per>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	function write() {
	var $out = $("#output");
	$out.text($out.text() + "\n" + JSON.stringify(arguments));
	}

	// http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity
	function setEndOfContenteditable(contentEditableElement)
	{
	var range,selection;
	if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
	{
	range = document.createRange();//Create a range (a range is a like the selection but invisible)
	range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
	range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
	selection = window.getSelection();//get the selection object (allows you to change selection)
	selection.removeAllRanges();//remove any selections already made
	selection.addRange(range);//make the range you have just created the visible selection
	}
	else if(document.selection)//IE 8 and lower
	{
	range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
	range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
	range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
	range.select();//Select the range (make it the visible selection
	}
	}

	$(document).ready(function(){
	write("document ready");

	$("#items .item .cursor").focus(function(){
	write("focus item cursor, item:", $(this).closest(".item").text());
	});

	$("#items .item .text").keypress(function(e){
	write("TEXT keypress: ", e.keyCode, e.shiftKey, e.ctrlKey, e.altKey);
	if (13 == e.keyCode) { // enter - no newlines supported in this example
	$(this).blur();
	}
	});

	$("#items .item .cursor").keypress(function(e){
	write("CURSOR keypress: ", e.keyCode, e.shiftKey, e.ctrlKey, e.altKey);
	if (13 == e.keyCode) { // enter
	var $text = $(this).siblings(".text").focus();
	setEndOfContenteditable($text[0]);
	}
	return false;
	});
	});
	</script>
	<style>
	.cursor:focus {
	border: 2px solid red;
	}
	[contenteditable=true]:hover {
	outline: 2px solid #09ACE6;
	}
	[contenteditable=true]:focus {
	outline: 2px solid #036689;
	}
	</style>
	</head>
	<body>
	<ul id="items">
	<li class="item">
	<span class="text" contenteditable="true" tabindex="-1">first</span>
	<!--
	By putting the "cursor" after the contenteditable, you can tab out
	of the contenteditable field and the same item's cursor will now be
	focused, allowing for the user to press Enter (to edit the same item again),
	or press any keyboard shortcuts to send the the current item, or tab
	to move to the next item!

	Ctrl-
	-->
	<span class="cursor" tabindex="1"></span>
	</li>
	<li class="item">
	<span class="text" contenteditable="true" tabindex="-1">second</span>
	<span class="cursor" tabindex="2"></span>
	</li>
	<li class="item">
	<span class="text" contenteditable="true" tabindex="-1">third</span>
	<span class="cursor" tabindex="3"></span>
	</li>
	</ul>
	<pre id="output"></per>
	</body>
	</html>