I have an app that has different lists a user can make, and the user can edit the name, but if he types a new name, he should be able to type enter and go many lines down.

I want to make the editable area only one line. I added a max height and overflow hidden, but that literally only hides what the other things you type, and I want only one line to stay.

code:

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>

I have an app that has different lists a user can make, and the user can edit the name, but if he types a new name, he should be able to type enter and go many lines down.

I want to make the editable area only one line. I added a max height and overflow hidden, but that literally only hides what the other things you type, and I want only one line to stay.

code:

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>

pictures:

• javascript
• css
• html
• markup

Share Improve this question Follow edited Oct 30, 2017 at 16:54 1stthomas 92722 gold badges1717 silver badges2727 bronze badges asked Oct 30, 2017 at 16:09 hannacreedhannacreed 66933 gold badges1717 silver badges3434 bronze badges 1

• 1 You can try to add keydown listener to you editable div, and if enter key was pressed just preventDefault() that. – Taras Danyliuk Commented Oct 30, 2017 at 16:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

As @TarasDanylyuk said, you can use keydown bined with preventDefault() to acplish that.

Here's a working example:

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 want to remove focus when Enter is pressed, you can do so by adding this line after the preventDefault() call:

e.target.blur();