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

Sending a parameter value when onClick function is called

What are some ways to ensure a JQM-created button is clickable in Firefox?

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

In Node.js, I encountered an issue where req.body was returning as undefined, despite the fact that when I logged req, I could

Having trouble with dynamic path generation for router-link in Vuejs when using a v-for loop?

Place various <select> choices in numerous rows

Developing a Chrome browser extension tailored for parsing unique file formats

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

javascript mobile nav event

Styling input[type='date'] for non-Chrome browsers with CSS

Step-by-step guide on integrating a JSON array fetched via Ajax from a Django/Python view with DataTable

Webstorm showcases files with similar content in a distinct manner

Dividing a JSON array by a specific key using lodash underscore

Determine the position of the cursor in an editable span

The Bootstrap navigation pills do not function properly when using a forward slash in the tab link

Locating the dot character within regular expression challenges

Troubles encountered with the search bar filter functionality, implementing JS/JQuery within a Laravel blade template

The Homescreen.js file is not showing up as expected on the localhost/home page and is not displaying

Encountering NPM Abortion Issue in Node.js

Posting values using AJAX in PHP - A guide