\ n后在特定行上将文本附加到textarea

时间:2015-03-13 03:45:31

标签: javascript jquery

假设我想在特定的动态线上向textarea附加文字。例如,我有一个checkboxes列表,其id范围来自0-i。现在我还有一个textarea,其行数与id范围完全相同。因此,如果用户点击复选框ID 2,我希望textarea中的第三行附加一些文字。

您是否必须首先将textarea拆分为

var todolines = $('#todoListSave').val().split('\n');然后单独附加文字还是有更好的方法?

1 个答案:

答案 0 :(得分:1)

您可以执行类似

的操作



var $text = $('textarea');
//to initiate the value not required if the textarea value is already given
$text.val(new Array($(':checkbox').length + 1).join('\n'));

$(':checkbox').change(function() {
  var split = $text.val().split('\n');
  if (this.checked) {
    split[this.id] += this.value;
  } else {
    var regex = new RegExp(RegExp.escape(this.value) + '$');
    split[this.id] = split[this.id].replace(regex, '')
  }
  $text.val(split.join('\n'));
})

if (!RegExp.escape) {
  RegExp.escape = function(value) {
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
  };
}

textarea {
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="0" value="1" />
<input type="checkbox" id="1" value="2" />
<input type="checkbox" id="2" value="3" />
<input type="checkbox" id="3" value="4" />
<input type="checkbox" id="4" value="5" />
<textarea></textarea>
&#13;
&#13;
&#13;