JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" placeholder="Paste Text Here">

<div id="target"></div>

CSS

input {
    width: 400px;
    height: 40px;
    border: 1px solid gray;
    display: block;
    margin: 40px;
    border-radius: 3px;
}

JavaScript

$target = $('#target')

$("input").bind('paste', function(e) {
    var value = e.originalEvent.clipboardData.getData('Text');
    
    value = value.split(/\n|,/).map(function(line) {
        return line.trim()
    })
	
    console.log(value)
    
    if(value && value.length) {
    	$target.empty()
        $ul = $('<ul>').appendTo($target)
    	value.forEach(function(item){
        	$item = $("<li>").text(item).appendTo($ul)
    	})
    }
    
});