将Textarea文本加载到输入框中

Question

For my website, users can provide a list of tracks. So far it works, However I wish to feature a textarea to textbox function

So people copy paste from a textfile into a textarea, where the convert button reads that text and places the proper artist/track in a inputbox

So if a user puts in:

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

The jquery code should place these into input boxes where Artist and Track are separated.

How can I achieve this?

Thanks in Advance!

Answer 1

This does the job. No need for a convert button. Just listen for the input event:

 $('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]); }); }); 

 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; } 

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