how to add "•" each time i hit enter key in textarea

Question

How do I add "•" each time I hit enter key in my textarea. I've been searching the codes of it. But I can't seem to find it. or after hitting the enter key and if I inputted a word, that's the only time it will add "•" before the word. Help please.

add it where? the beginning of the current line? end of the current line? start of the next line? above or below the textarea? — Kevin B, Oct 15 '13 at 14:37
I think it's pretty clear that this is a bulleted list, not a multi-line password. — JacobEvelyn, Oct 15 '13 at 14:38
possible duplicate of [Enter key in textarea](http://stackoverflow.com/questions/2099661/enter-key-in-textarea) — adamdunson, Oct 15 '13 at 14:39
Don't do this while the user is filling out the textarea. That's way more work than it's worth. Altering the value of the textarea while it is focused means having to get and reset the cursor position when you alter it. It's easy to make this replacement later by splitting the text on `\n` — Kevin B, Oct 15 '13 at 14:39

score 3 · Accepted Answer · answered Oct 15 '13 at 14:44

3

http://jsbin.com/uPALIRU/1/

$('textarea').on('keydown',function(e){
  var t = $(this);
  switch(e.which){
  case 13:
    t.val(t.val()+'•');
    return false;
  }  
});

answered Oct 15 '13 at 14:44

rafaelcastrocouto

11,781
3
38
63

but how about, on the time that hit a character on a keyboard. it will automatically add the bullet? – Vincent Oct 15 '13 at 14:56
What have you already tried? – rafaelcastrocouto Oct 16 '13 at 16:54

score 2 · Answer 2 · edited May 23 '17 at 12:14

You probably want something along the lines of this:

$(function() {
  $('#List').keyup(function (event) {
    if (event.keyCode == 13) { // If enter is pressed.
      var content = this.value;
      var sel = getInputSelection(this);
      var caret = getCaret(this);
      var bullet = "• ";
      this.value = content.substring(0,caret) +
                   bullet +
                   content.substring(caret,content.length);
      setInputSelection(
        this,
        sel.start + bullet.length,
        sel.end + bullet.length
      );
      event.stopPropagation();  
    }
  });
});

with the getCaret() function stolen from this SO answer and the getInputSelection() and setInputSelection() functions stolen from this one.

Full (somewhat messy) JSFiddle here.

This has the advantage of behaving more like a text editor. If your cursor is not at the end of the textarea and you press enter, you want the bullet to appear at your cursor, not just get added to the end of the textarea.

Edit:

Added cursor position resetting.

Hey Jacob, in your JSFiddle example, do you know how to avoid the cursor goes always to the end of the textarea when you press enter? thanks! — JohnA10, Oct 08 '14 at 05:50
Great question. It looks like that behavior is the default for when you update a textarea's `value`, based on some quick searching which led me to [this SO question](http://stackoverflow.com/questions/3286595/update-textarea-value-but-keep-cursor-position). I've incorporated one of the answers there into my code. — JacobEvelyn, Oct 08 '14 at 16:06

score 2 · Answer 3 · answered Oct 15 '13 at 14:55

It sounds like you wish to make a bulleted list, prefixing lines with a bullt (•)

  var linestart = function(txt, st) {
    var ls = txt.split("\n");
    var i = ls.length-1;
    ls[i] = st+ls[i];
    return ls.join("\n");
  };
  $('textarea').on('keydown', function(e) {
    var t = $(this);
    if(e.which == 13) {
      t.val(linestart(t.val(), '•') + "\n");
      return false;
    }  
  });

how to add "•" each time i hit enter key in textarea

3 Answers3