Edit in JSFiddle

$(function() {
  $('#btnClear').click(function() {
    $('#target').val('');
    $('#result').val('');
  });
  $('#usage').hide();
  $('#btnUsage').click(function() {
    $('#usage').show(1000).delay(5000).hide(1000);
  });

  $('#target').each(function() {
    $(this).bind("keyup", execute(this));
  });
});

function execute(elm) {
  var v, old = elm.value;

  return function() {
    if (old != (v = elm.value)) {
      old = v;

      var text = $('#target').val().replace(/\r\n|\r/g, "\n");
      var lines = text.split('\n');
      var text2 = '';

      $.each(lines, function(i, line) {
        if (line != '') {
          console.log('[' + i + ']' + line);

          if (i === 0) {
            text2 += $.trim(line);
          } else {
            text2 += '\n' + $.trim(line);
          }
        }
      });
      $('#result').val(text2);
    }
  }
}

<div id="wrap">
  <div class="contents">
    <div class="leftContents">
      <div class="category">
        <span>Target:</span>
        <div>
          <textarea id="target" class="trim"></textarea>
        </div>
      </div>
    </div>
    <div class="rightContents">
      <div class="category">
        <span>Result:</span>
      </div>
      <div>
        <textarea id="result" class="trim"></textarea>
      </div>
    </div>
    <div class="clear">
    </div>
    <div class="action">
      <input type="button" id="btnClear" value="clear">
      <input type="button" id="btnUsage" value="usage">
      <div id="usage">
        <pre>文字列の前後にある半角・全角スペースを取り除きます。
文字列の真ん中のスペースは無視！

例：☆★A☆B★C☆★ ⇒ A☆B★C
※[☆] 半角スペース
　[★] 全角スペース
</pre>
      </div>
    </div>
  </div>
</div>

body {
  height: 100%;
  width: 560px;
  margin: auto;
  font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
  //arial;
}

#wrap {
  width: 100%;
  position: relative;
  min-height: 100%;
}

.contents {
  padding-bottom: 30px;
}

.leftContents,
.rightContents {
  float: left;
}

.category {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #68217A;
  margin-left: 20px;
}


/*Trim*/

textarea {
  margin-top: 20px;
  width: 232px;
  height: 7em;
  line-height: 150%;
  margin-left: 20px;
}

.action {
  margin-left: 20px;
}

.col-txt {
  float: left;
  width: 60px;
  margin-left: 25px;
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

.col-val {
  float: left;
  width: 200px;
}

.clear {
  clear: both;
}