CODEWITHSUNDEEP
javascripthtml
scriptify.js
scriptify.js

Reputation: 37

contentEditable div Multilines issue on FireFox

I have a div with `contentEditable="true"

<div id="msgInput" contentEditable="true"></div>

When the user types in it and presses 'enter' it appends what the user typed to another div 

<div id="output"></div>

But I need it so the user can type multiple lines (with shift+enter) without firing the 'keydown' event on the 'enter' key

Here is how I achieved this: (please note that I added the 'input' event Listener because I need to save what the user types in my state variable)

let input = document.getElementById('msgInput');
let output = document.getElementById('output');
let state = '';

input.addEventListener('input', function(event) {
    state = event.target.textContent;
});

input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
        event.target.innerHTML = '';        
        output.innerHTML = state;
        event.preventDefault();
      }
});

On Chrome, this is working fine,

for example, If I type "first"

then shift+enter,

then type "second"

and then press enter, it will be appended like this:

first
second

And that's exactly what I want.

But on firefox, it's appended in one line (merged as one word)

firstsecond

I need it in firefox to have the same behavior as in chrome

here's a fiddle for this https://jsfiddle.net/Lrnx24tb/2/

Upvotes: 2

Views: 60

Answers (1)

Darlesson
Darlesson

Reputation: 6162

You could try replace textContent for innerText:

input.addEventListener('input', function(event) {
    state = event.target.innerText;
});

Upvotes: 2

Related Questions