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

The ng-click event is not triggering the Controller Function as expected

In the provided Javascript snippet, how would you classify `word` - a function, variable, or object?

Unable to perform the GET request method due to data indicating [object object]

Firefox failing to display CSS files on web pages

What strategies can be used to stop elements from reverting to their original state?

Shifting the placement of a component in Vue JS when hovering the mouse

Ways to create a looping mechanism with specified number restrictions and limitations

Enliven the transition between grid sizes

What is the best approach for addressing null values within my sorting function?

Excerpts capturing the significance of HTML attribute values

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Retrieve information from the table and display it in a reverse order

Having difficulty processing information retrieved from an ajax request in jQuery

Placement of Buttons Inside a Division Tag

The animation in my SVG comes to a halt at a certain point

Is it possible to verify if a user is accessing a webpage through Electron?

Doesn't the .stop(true) function completely clear the queue as it should?

Having trouble obtaining data from the database and showing it on the webpage

Tips for integrating semantic HTML with React components

Using jQuery, remove any white spaces in a textbox that are copied and pasted