Allowing the contenteditable attribute to function only on a single line of

Question

Allowing the contenteditable attribute to function only on a single line of

My app allows users to create different lists, with the ability to edit the name. However, I am facing an issue where if a user types a new name, it should remain on only one line. I tried adding max height and overflow hidden properties, but it only hides the additional lines of text instead of restricting it to one line.

Here is the code snippet:

h3 {
  height: 25px;
  max-height: 25px;
  overflow: hidden;
}

<h3 contenteditable="true">To Do List</h3>
<section id="pageOne" contenteditable="true">
    <li style="color: #393939;"></li>
</section>

Attached are some screenshots for reference:

https://i.stack.imgur.com/rwPzz.png https://i.stack.imgur.com/1FrwK.png

javascript css html markup

Answer 1

Answer №1

According to @TarasDanylyuk, the solution involves using the keydown event along with preventDefault().

Check out this example that demonstrates how it works:

document.getElementById('pageOne').addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {    // if Enter has been pressed
    e.preventDefault();
  }
});

h3 {
  height: 25px;
  max-height: 25px;
  overflow: hidden;
}

<h3 contenteditable="true">To Do List</h3>
<section id="pageOne" contenteditable="true">
  <li style="color: #393939;"></li>
</section>

If you'd like to unfocus when the Enter key is pressed, simply add this line after calling preventDefault():

e.target.blur();

Answer 2

According to @TarasDanylyuk, the solution involves using the keydown event along with preventDefault().

Check out this example that demonstrates how it works:

document.getElementById('pageOne').addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {    // if Enter has been pressed
    e.preventDefault();
  }
});

h3 {
  height: 25px;
  max-height: 25px;
  overflow: hidden;
}

<h3 contenteditable="true">To Do List</h3>
<section id="pageOne" contenteditable="true">
  <li style="color: #393939;"></li>
</section>

If you'd like to unfocus when the Enter key is pressed, simply add this line after calling preventDefault():

e.target.blur();

Allowing the contenteditable attribute to function only on a single line of

Answer №1

Similar questions

Are you familiar with Vue.JS's unique router options: the 'history' and 'abstract' routers?

javascript: window.open()

How to effectively utilize multiple Vue instances in your project?

Modify the background's color and incorporate a pointlight using three.js

Positioning an image/carousel at the bottom of multiple without the need for alignment

Setting a JavaScript variable to null

What is the best way to display a Bootstrap toggle?

Is there a way to detect when the browser's back button is clicked?

The setState function in the useState hook is being called only one time when triggered by an EventListener

Hide the navigation menu when a page link is selected

The elements in Dynamically generated ChartJs do not align with the bottom of the y-axis

Flashing white screen when transitioning between pages on phonegap iOS system

What could be causing the carousel to be hidden in a Next.js project?

Switching from HTML to PHP redirection

Tips for displaying cards with responsive design utilizing Bootstrap 5

JavaScript function not executing

Stop a single piece of data from continuously cycling

Methods for assigning values to a formControl using an array

Fonts fail to load on Internet Explorer 10

Is there a way to block form submissions for users who have disabled JavaScript?