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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <ul class="contenteditable">
    <li><input placeholder="type here" /></li>
  </ul>
  
</body>
</html>
​
 
$(function(){
  var currentNode, 
      lastNode, 
      numberOfLis, 
      nodeToRemove,
      findCurrentLi = function(el) {
        return $(el).parent('li');
      },
      removeNextAndFocusPrevious = function(el){
        nodeToRemove = findCurrentLi(el);
        nodeToRemove.prev().find('input').focus();
        nodeToRemove.remove();
      };
  
  $('.contenteditable').on('keydown', 'input', function(ev) {
​
    if (ev.which == 13) { // enter key
      currentNode = $(this).parent('li');
      lastNode = $('.contenteditable li:last');
      numberOfLis = $('.contenteditable li').length;
      
      if (this.value) {
        currentNode.after('<li><input placeholder="type here" /></li>').next('li').find('input').focus();
      }
      else if (!this.value && numberOfLis > 1 && currentNode[0] == lastNode[0]) {
        removeNextAndFocusPrevious(this);
      }
    } else if (ev.which == 8) { // backspace key
      
      numberOfLis = $('.contenteditable li').length;
​
      currentNode = $(this).parent('li');
      if (!this.value && numberOfLis > 1) {
       ev.preventDefault(); // disable back by history, mostly for IEs
       removeNextAndFocusPrevious(this);
      }
    } else if (ev.which == 38) { // up arrow
     findCurrentLi(this).prev().find('input').focus();
      
    } else if (ev.which == 40) { // down arrow 
      
      findCurrentLi(this).next().find('input').focus();
    }
  }).on('blur', 'input', function(ev) {
    
    if (!this.value && numberOfLis > 1) $(this).parent('li').remove();
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers