• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Forum
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Miscellaneous / Press shift and enter for a new line

Press shift and enter for a new line

Press shift and enter for a new line

By default, pressing Enter or Shift and Enter will generate a new line for a textarea element.

In some cases such as an inline editable element, or a messaging application, you would like to submit the data when user presses Enter. The only way to generate a new line is to press Shift and Enter.

Assume that we have the following textarea element:

<textarea id="message"></textarea>

To prevent the default behavior of pressing the Enter key, we can handle the keydown event:

const ele = document.getElementById('message');

ele.addEventListener('keydown', function(e) {
    // Get the code of pressed key
    const keyCode = e.which || e.keyCode;

    // 13 represents the Enter key
    if (keyCode === 13 && !e.shiftKey) {
        // Don't generate a new line
        e.preventDefault();

        // Do something else such as send the message to back-end
        // ...
    }
});

Source

https://htmldom.dev/press-shift-and-enter-for-a-new-line/

Miscellaneous

Related Snippets:

  • Remove duplicate items from an array
  • Determine whether two values are the same value
  • Strip HTML from a given text
  • Show a loading indicator when an iframe is being loaded

Primary Sidebar

FREE UPDATES!

Get the latest updates in your inbox for FREE!

Popular Posts

Story Generator

IP Grabber

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2022 JavaScriptSource.com

  • About
  • Privacy Policy
  • Submit
  • FAQ
  • Jobs For Developers
  • Contact Us