Question

我试图让用户能够为我的应用程序创建自定义列表，通过在文本区域字段中插入他的选项，使用\ n（输入）作为分隔符将每一行视为一个选项，我需要允许用户在多行中输入一个选项，任何人都可以帮忙吗？

<textarea></textarea>

用户输入： AA BB CC 输入textarea，然后我正在处理它们以分隔它们进入分隔符，所以我在列表中有三个选项：1-aa，2-bb和3-cc，但是我需要制作aa，bb是第一个选项，cc第二个选项，我需要新的分隔符，我还需要更多的想法吗？

Answer 1

我认为你说你需要用户在textarea中输入可列表项，并且需要支持跨多行显示单个选项的能力。

正如您所见，使用单个换行符作为项目分隔符不起作用 - 您无法区分每行一行中的两个项目和两行中显示的单个项目。

使用两个换行而不是一个作为项目分隔符。

示例输入：

Item One

Item Two line 1
Item Two line 2

Item Three

Answer 2

您可以使用您喜欢的任何分隔符。例如一个空行（如分隔章节时），或逗号或分号。任何不属于要输入的文本的字符（或字符序列）。

请记住告诉用户使用什么作为分隔符。

Answer 3

此代码允许在多行上输入选项，并且一旦按 Enter 两次就会创建选项：

<强>的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>

在Firefox 3.6.3，Opera 10.53，IE 8和Iron 5.0.380中测试。

html中textarea的新分隔符

3 个答案: