Animate the height transition of contenteditable after a line of text is added (using shift+enter) or removed

Question

Animate the height transition of contenteditable after a line of text is added (using shift+enter) or removed

Currently, the contenteditable attribute is being utilized on the <div> tag to enable autogrow functionality similar to a textbox. Additionally, there is an attempt to incorporate a height transition. While most aspects are functioning correctly, there is one issue - the animated height adjustment does not occur when deleting characters, specifically a line, unlike when adding new lines. My CSS knowledge is still limited.

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}

<div class="autogrow" contenteditable="true"></div>

When attempting to animate using Shift + Enter, it does not work; however, it functions correctly when only using Enter. The challenge lies in deleting lines and using the Shift + Enter combination to enter a new line.

How can this be resolved? Is there a way to achieve this using purely CSS, or would it require implementing a JavaScript function?

javascript jquery html css

Answer 1

Answer №1

To address these challenges, I adopt a solution that does not rely solely on CSS animations/transitions, as I have encountered issues with them in the past. For instance, when using the CSS implementation, there is a noticeable bounce-back effect if the Enter key is pressed too quickly (you can slow down the animation to observe this).

https://i.sstatic.net/vwwLI.gif

Furthermore, different browsers handle new lines differently, with some adding

<div><br></div>

while others, like certain versions of Internet Explorer, only add <br>.

I have not managed to address all these issues through modification or found a single implementation that solves them all. Therefore, I have chosen not to alter the behavior of contenteditable at all, relying instead on the browser's default functionality and responding to events as needed.

We can avoid concerns about key events like Shift + Enter or actions like deletion, as the browser handles these natively.

My approach involves using two elements: one for the actual contenteditable and another for styling purposes. The styling element adjusts its height with animations/transitions based on the height of the contenteditable.

To achieve this, I monitor all events that could alter the height of a contenteditable. If the height of my styling element differs, I animate it accordingly.

const kAnimationSpeed = 125;
const kPadding = 10;

$('div[contenteditable]').on('blur keyup paste input', function() {
  const styleElement = $(this).prev();

  const editorHeight = $(this).height();
  const styleElementHeight = styleElement.height();

  if (editorHeight !== styleElementHeight - kPadding * 2) {
    styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed);
  }
});

.autogrowWrapper {
  position: relative;
}

.autogrow {
  border: 1px solid rgb(0, 0, 0);
  height: 40px; /* line-height + 2 * padding */
}

div[contenteditable] {
  outline: none;
  line-height : 20px;
  position: absolute;
  top: 10px; /* padding */
  left: 10px; /* padding */
  right: 10px; /* padding */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="autogrowWrapper">
  <div class="autogrow"></div>
  <div contenteditable="true"></div>
</div>

Answer 2

To address these challenges, I adopt a solution that does not rely solely on CSS animations/transitions, as I have encountered issues with them in the past. For instance, when using the CSS implementation, there is a noticeable bounce-back effect if the Enter key is pressed too quickly (you can slow down the animation to observe this).

https://i.sstatic.net/vwwLI.gif

Furthermore, different browsers handle new lines differently, with some adding

<div><br></div>

while others, like certain versions of Internet Explorer, only add <br>.

I have not managed to address all these issues through modification or found a single implementation that solves them all. Therefore, I have chosen not to alter the behavior of contenteditable at all, relying instead on the browser's default functionality and responding to events as needed.

We can avoid concerns about key events like Shift + Enter or actions like deletion, as the browser handles these natively.

My approach involves using two elements: one for the actual contenteditable and another for styling purposes. The styling element adjusts its height with animations/transitions based on the height of the contenteditable.

To achieve this, I monitor all events that could alter the height of a contenteditable. If the height of my styling element differs, I animate it accordingly.

const kAnimationSpeed = 125;
const kPadding = 10;

$('div[contenteditable]').on('blur keyup paste input', function() {
  const styleElement = $(this).prev();

  const editorHeight = $(this).height();
  const styleElementHeight = styleElement.height();

  if (editorHeight !== styleElementHeight - kPadding * 2) {
    styleElement.stop().animate({ height: editorHeight + kPadding * 2 }, kAnimationSpeed);
  }
});

.autogrowWrapper {
  position: relative;
}

.autogrow {
  border: 1px solid rgb(0, 0, 0);
  height: 40px; /* line-height + 2 * padding */
}

div[contenteditable] {
  outline: none;
  line-height : 20px;
  position: absolute;
  top: 10px; /* padding */
  left: 10px; /* padding */
  right: 10px; /* padding */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="autogrowWrapper">
  <div class="autogrow"></div>
  <div contenteditable="true"></div>
</div>

Answer 3

Answer №2

It may seem a bit unconventional, but this method gets the job done.

Start by adjusting your CSS code:

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}

Next, implement this jQuery script to detect Shift + Enter events and insert a div each time they occur:

$(".autogrow").keydown(function(e){

    if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13)
    {
       $(this).animate({height: $(this).height()+20},200);
                $(this).append('<div><br></div>');
    }
});

With these changes, your setup should be good to go.

Feel free to test it out on this fiddle: https://jsfiddle.net/wx38rz5L/582/

Answer 4

It may seem a bit unconventional, but this method gets the job done.

Start by adjusting your CSS code:

.autogrow {
  border: 1px solid rgb( 0, 0, 0 );
  padding: 10px;
}
@keyframes line_insert {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
.autogrow[contenteditable] > div {
  animation-duration: 250ms;
  animation-name: line_insert;
}
.autogrow[contenteditable] {
  overflow: hidden;
  line-height: 20px;
}

Next, implement this jQuery script to detect Shift + Enter events and insert a div each time they occur:

$(".autogrow").keydown(function(e){

    if (e.keyCode == 13 && e.shiftKey || e.keyCode == 13)
    {
       $(this).animate({height: $(this).height()+20},200);
                $(this).append('<div><br></div>');
    }
});

With these changes, your setup should be good to go.

Feel free to test it out on this fiddle: https://jsfiddle.net/wx38rz5L/582/

Animate the height transition of contenteditable after a line of text is added (using shift+enter) or removed

Answer №1

Answer №2

Similar questions

Guide to combining two jQuery scripts that utilize distinct data types

Merging text and a JSON object to retrieve the information

Reposition picture "overlays" additional HTML components

Explore various queries and paths within MongoDB Atlas Search

Creating a responsive navigation bar with Bootstrap步 is simple and effective

Detecting browser or tab closure in Node/Express Application: A comprehensive guide

When utilizing Reactjs, accessing an element by its id becomes challenging when the element is nested within a map() function

Display Bootstrap modal upon page load automatically

Utilizing Font Awesome icons within a JSON structure

What to do when faced with the error message "Nodemon is not recognized as a command"?

Displaying the servlet response within an iframe

Transmitting and receiving a blob using JavaScript

What is the best way to send {...rest} properties to a text field in react material?

What could be causing the PAGE CSS to malfunction?

Guide on adding increasing numbers to Slug with Mongoose

One jQuery plugin was functioning perfectly, while the other one was failing to work as expected

What is the best way to upload this HTML file to create my own visual representation?

Is there a performance boost when using queue() and filter() together in jQuery?

Utilizing Next.js routing to accommodate two distinct subdomains on a single website

Encountering a Rails 500 server error when making an Ajax request to a form_for partial