Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

Question

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

I'm in the process of developing a Chrome Extension that allows users to create a to-do list. My goal is to enable users to submit their task by pressing the "Enter" key, which should move the task to the next line after submission. I am currently facing challenges with implementing this functionality.

HTML:

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li>test</li>
</ul>

Javascript:

$(() => {
   $('#newtask').on('keydown', (e) => {
     if(e.keyCode == 13){
       ???
     }
   });
 });

javascript html css google-chrome-extension

Answer 1

Answer №1

Make sure to attach the keypress eventlistener to the input element, not the ul. When the enter key is pressed, take the content of the input field, create a new li element, set its text to the entered value, append it to the ul, and then clear the input field.

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        $('#tasksUL').append(`<li>${newTask}</li>`);
        $(this).val("");
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li>test</li>
</ul>

Answer 2

Make sure to attach the keypress eventlistener to the input element, not the ul. When the enter key is pressed, take the content of the input field, create a new li element, set its text to the entered value, append it to the ul, and then clear the input field.

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        $('#tasksUL').append(`<li>${newTask}</li>`);
        $(this).val("");
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li>test</li>
</ul>

Answer 3

Answer №2

To implement this functionality using vanilla JavaScript, you simply need to attach an eventListener to the input element itself that listens for keydown events.

let taskList = document.getElementById('tasksUL');
document.getElementById('newTask').addEventListener('keydown', (e) => {
    if(e.key == 'Enter'){
        let newItem = document.createElement('li');
        newItem.innerText = e.target.value;
        taskList.appendChild(newItem);
    }
});

Answer 4

To implement this functionality using vanilla JavaScript, you simply need to attach an eventListener to the input element itself that listens for keydown events.

let taskList = document.getElementById('tasksUL');
document.getElementById('newTask').addEventListener('keydown', (e) => {
    if(e.key == 'Enter'){
        let newItem = document.createElement('li');
        newItem.innerText = e.target.value;
        taskList.appendChild(newItem);
    }
});

Answer 5

Answer №3

If you need the list to display the text input by the user, consider using the jQuery append method for this purpose.

$('#newtask').keydown(function(e){
    if (e.which == 13) {
        //Create new HTML element to append:
        var newLi = "&lt;li&gt;" + $('#newtask').val() + "&lt;/li&gt;";
        $('#tasksUL').append(newLi);
    }
});

You can test out my implementation on JS Fiddle

Answer 6

If you need the list to display the text input by the user, consider using the jQuery append method for this purpose.

$('#newtask').keydown(function(e){
    if (e.which == 13) {
        //Create new HTML element to append:
        var newLi = "&lt;li&gt;" + $('#newtask').val() + "&lt;/li&gt;";
        $('#tasksUL').append(newLi);
    }
});

You can test out my implementation on JS Fiddle

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Storing video blobs in the filesystem using Electron and Node.js

passport not initializing session with requests

Issue with TableHead not functioning properly when sorting is requested

Issue: The module 'xdl' cannot be located while executing the command "npm start" in React Native

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

i am trying to execute a function in an angularjs controller through html, but the scope variable that i am

What is the process for inserting text or letters into a checkbox using Material Ui?

A guide to removing functions from the render method

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

Mishandling of string interpretation

Can a direct link to a Redis server be established through a web browser?

Tips for designing a navbar specific to a profile section

I require the ability to access a reference parameter with a dynamically changing name within a Vue template

Automatically adjust CSS grid to fill based on the width of child elements

The location layer on my Google Maps is not appearing

Combining the total of numerous inputs that are multiplied by a specific value all at once

Vue.js - I am looking to create dynamic buttons that change color when clicked

Leaflet setStyle changes are effective when applied through the console but do not reflect in the actual

The closing brackets in PHP substr() function are causing style issues

A guide on effectively utilizing ref forwarding in compound component typing