JSFiddle - React, Tailwind, and code Playground

by TimWolla

HTML

<textarea id="list" cols="40" rows="10">Punkt 1, Punkt 2</textarea>
<textarea id="out" readonly="readonly" cols="40" rows="10"></textarea>

JavaScript

($('#list')).on('keydown keyup keypress change', function(event) {
  var content, lis;
  lis = (function() {
    var _i, _len, _ref, _results;
    _ref = ($(this)).val().split(',');
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      content = _ref[_i];
      if (content.trim() !== '') {
        _results.push("<li>" + (content.trim()) + "</li>");
      }
    }
    return _results;
  }).call(this);
  if (lis.length > 0) {
    return ($('#out')).val("<ul class=\"list-inline\">\n	" + (lis.join('\n\t')) + "\n</ul>");
  } else {
    return ($('#out')).val('');
  }
});

($('#list')).keypress();

($('#list')).on('focus', function(event) {
  return ($(this)).val('');
});

/*
($ '#list').on 'keydown keyup keypress change', (event) ->
	lis = ("<li>#{content.trim()}</li>" for content in ($ @).val().split ',' when content.trim() isnt '')
	if lis.length > 0
		($ '#out').val """
			<ul class="list-inline">
				#{lis.join '\n\t'}
			</ul>"""
	else
		($ '#out').val ''
($ '#list').keypress()

($ '#list').on 'focus', (event) ->
	($ @).val ''
*/