将Textarea文本加载到输入框中

Question

对于我的网站，用户可以提供曲目列表。 到目前为止它的工作原理，但是我希望在文本框功能

中加入textarea

因此人们将粘贴从文本文件复制到textarea，其中转换按钮读取该文本并将正确的艺术家/曲目放在输入框中

因此，如果用户输入：

Artist1 - Track1
Artist2 - Track2
Artist3 - Track3
Artist4 - Track4

jquery代码应将它们放在Artist和Track分开的输入框中。

我怎样才能做到这一点？

提前致谢！

Answer 1

这可以胜任。无需转换按钮。只需听取input事件：

＆＃13;

＆＃13;

$('textarea').on('input', function() {
  var sp= this.value.split(/[\r\n]/);
  sp.forEach(function(value, i) {
    var sp= value.split(/ *- */);
    $('.Artists tr').eq(i).find('input').eq(0).val(sp[0]);
    $('.Artists tr').eq(i).find('input').eq(1).val(sp[1]);
  });
});

＆＃13;

textarea {
  width: 90%;
  height: 6em;
}

.Artists td:nth-child(1):before {
  content: 'Artist';
  display: block;
  font: 9px verdana;
  color: brown;
}

.Artists td:nth-child(2):before {
  content: 'Track';
  display: block;
  font: 9px verdana;
  color: brown;
}

input {
  width: 20em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

<table class="Artists">
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
  <tr><td><input type="text"></td><td><input type="text"></td>
</table>

＆＃13;

＆＃13;

＆＃13;