Bullet list fiddle

by tedp

HTML

<div id="banner-message">
  <p>Hello World</p>
  <textarea></textarea>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

textarea {
  width: 300px;
  height: 150px;
}

JavaScript

// find elements
var box = $("textarea")

// listen for enter key
box.keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){

      value = box.val();
      // to get the position of the cursor
      index = box.getCursorPosition();
      // select all from the starting point to the cursor position
      str_start = value.substring(0, index);
      // get end
      str_end = value.substring(index, value.length);
      // split the str with a line break
      splt = str_start.split('\n');
      // then finally to get your last line
      lastLine = splt[splt.length - 1].trim();
      // check first 2 characters
      lineStart = lastLine.substring(0,2);

      switch (lineStart) {
        case "* ":
          event.preventDefault();
          box.val(str_start + "\n* " + str_end);
					box.selectRange(index + 3);
          break;
        case "- ":
          alert("dash");
          break;	
      }

    }
});

    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
    
    $.fn.selectRange = function (start, end) {
    if (typeof end === 'undefined') {
        end = start;
    }
    return this.each(function () {
        if ('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if (this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
           ...