JSFiddle - React, Tailwind, and code Playground

by knevercode

HTML

<form id="myForm">
  <textarea id="myInput" rows="1" placeholder="Type and press Enter to submit..."></textarea>
</form>
<div id="output"></div>

CSS

#myInput {
  width: 100%;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

JavaScript

const textarea = document.getElementById('myInput');
const form = document.getElementById('myForm');
const output = document.getElementById('output');

// Auto-resize the textarea
textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
});

// Handle Enter key
textarea.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault(); // prevent newline
    form.requestSubmit(); // submit the form
  }
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const value = textarea.value.trim();
  if (value) {
    output.innerHTML += `<p>${value}</p>`;
    textarea.value = '';
    textarea.style.height = 'auto';
  }
});