new separator for textarea in html

Question

I'm trying to give the user ability to create customized list for my application,by insert his choices in text area field ,each line is treated as one choice using the \n (enter) as separator , i need to allow user to enter one choice in multiple lines,any one can help?

<textarea></textarea>

user enter : aa bb cc with enter in textarea, and then I'm processing them to split them at enter separator ,so i have three option in list :1-aa ,2-bb,and 3-cc ,but what i need to make aa ,bb is the first option, and cc second option ,i need new separator, i need more ideas?

Answer 1

You can use whatever separator you like. For example an empty line (as when separating chapters), or a comma or semicolon. Any character (or sequence of characters) that is not part of the text to be entered.

Just remember to tell the user what to use as a separator.

Answer 2

I think you're saying that you need the user to enter listable items in a textarea and need to support the ability to present a single option across multiple lines.

As you've seen, using a single newline as the item separator does not work - you can't differentiate between two items on one line each and a single item presented on two lines.

Use two newlines instead of one as the item separator.

Example input:

Item One

Item Two line 1
Item Two line 2

Item Three

Answer 3

This code will allow for the options to be entered on multiple lines and the options are created once you press Enter twice:

JavaScript

<script type="text/javascript">
  var LastKeyCode=-1;

  function updateOptions(e) {
    if (e.keyCode) {
      var KeyCode=e.keyCode;
    } else {
      var KeyCode=e.charCode;
    }

    if (KeyCode==13 && LastKeyCode==13) { // Enter?
      var RowsDataAry=document.getElementById('inputfield').value.replace(/\r\n/g,"\n").split(/\n{2,}/g);  // Fix IE CRs and split the textarea input

      document.getElementById('choices').options.length=0;  // Empty select

      for (RowID in RowsDataAry) {
        var TextVal=RowsDataAry[RowID].replace(/\n/g,", ").replace(/, $/,"");   // Set commas and remove the last comma

        document.getElementById('choices').options.length++;
        document.getElementById('choices').options[RowID].value=RowID;  // Add option value
        document.getElementById('choices').options[RowID].text=TextVal;
;  // Add option text
      }
    }

    LastKeyCode=KeyCode;
  }
</script>

HTML

<select id="choices" size="20"></select>

<textarea id="inputfield" onkeypress="updateOptions(event)" cols="40" rows="20"></textarea>

Tested in Firefox 3.6.3, Opera 10.53, IE 8 and Iron 5.0.380 .