Submit on enter, line feed shift+enter

shift + enter = add a new line enter = submit

by Joshua Eckerman

HTML

<p>Press [Enter] or click [ok] to start chat (shift + enter for a new line)</p>
<form id="gg-form" action="/echo/html/" method="post">
  <div class="gg-message">
    <textarea name="subject" id="subject" placeholder="Your message here"></textarea>
  </div>
  <div class="gg-submit">
    <button type="button">ok</button>
  </div>
</form>
<div id="result"></div>

CSS

/**
 * For display purposes only for this test case
 *
 **/

body {
  margin: 10px;
  background: #D1D3D4;
  color: #414142;
}

.gg-message {
  float: left;
}

.gg-submit {
  padding-left: 7px;
  float: left;
}

textarea {
  width: 204px;
  height: 18px;
  padding: 11px 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  line-height: 18px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  resize: none;
  cursor: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-appearance: textarea;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  -webkit-appearance: textarea;
  -moz-appearance: textarea;
  -moz-rtl-ordering: logical;
  -moz-user-select: text;
  -moz-appearance: textarea;
  flex-direction: column;
}

button {
  background: #61A966;
  color: #fff;
  display: inline-block;
  padding: 0 15px;
  min-width: 0;
  margin: 0;
  height: 40px;
  line-height: 40px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  top: 1px;
  cursor: pointer;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  background: #61A966;
  color: #fff;
  box-shadow: none;
  -webkit-appearance: none;
}

JavaScript

/**
 * For demo purposes only, not actual JS code
 *
 **/

$('#subject').on('keyup', function(event) {
  this.style.height = "18px";
  this.style.height = (this.scrollHeight - 22) + 'px';
  var diff = parseInt($('#subject').css('padding-bottom')) + parseInt($('#subject').css('padding-top'));
  this.style.height = this.scrollHeight - diff
  if (event.keyCode == 13) {
    if (!event.shiftKey) {
      submitHandler();
    }
  }
});

$('button').on('click', function(e) {
  submitHandler();
});

function submitHandler() {
  document.write('Click [Result] above to restart.<hr/><br/><strong>Chat started:</strong> ' + $('#subject').val());
  e.preventDefault();
}