I'm attempting to format the text in an contenteditable div after Enter is pressed. The problem is that no keyups are being registered from any key, so this is making it impossible. Other events, such as 'click' does work, and if I change the element to 'document' (document.addEventListener()...) this will make it work too, but this is an extreme solution. Is there a simple solution?
window.addEventListener('load', function() {
var editbox = document.getElementById("editable")
editbox.addEventListener('keyup', function(e) {
alert("this should appear");
});
});<main contenteditable="true">
<div class="box" id="editable">
text
</div>
</main>I'm attempting to format the text in an contenteditable div after Enter is pressed. The problem is that no keyups are being registered from any key, so this is making it impossible. Other events, such as 'click' does work, and if I change the element to 'document' (document.addEventListener()...) this will make it work too, but this is an extreme solution. Is there a simple solution?
window.addEventListener('load', function() {
var editbox = document.getElementById("editable")
editbox.addEventListener('keyup', function(e) {
alert("this should appear");
});
});<main contenteditable="true">
<div class="box" id="editable">
text
</div>
</main>4 Answers
Reset to default 4Use keyCodeevent.key to detect the specific key 'Enter' = ENTER.
Use event.target property to detect exactly what element was typed on. The #editable div is within the main which is contenteditable so it can't be accessed by normal means, therefore target the main instead.
To test the demo:
- Place the cursor within the blue outlined area.
- Press the ENTER key.
- The console should log every ENTER key pressed.
- Now click below the outlined area and press ENTER.
- The keyup event is ignored and there's nothing logged.
Demo
document.addEventListener('keyup', function(e) {
if (e.key === 'Enter' && e.target.tagName === 'MAIN') {
console.log('ENTER');
}
});#editable {
color: red
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<main contenteditable="true">
<div class="box" id="editable">
text
</div>
</main>
</body>
</html>- You should listen the element with
contenteditable="true" - there is special event for it called
input. - you don't need
document.getElementByIdat almost all cases. almost every element withidhas it's own variable.
window.addEventListener('load', function() {
let enterCount = 0;
editable.addEventListener('input', function(e) {
console.log ("this should appear");
if (enterCount < e.target.querySelectorAll('br').length) {
console.log ('enter was pressed');
}
enterCount = e.target.querySelectorAll('br').length;
});
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="javascript.js"></script>
</head>
<body>
<main contenteditable="true" id="editable">
<div class="box" >
text
</div>
</main>
</body>
</html>You're not attaching the listener to the right element.
window.addEventListener('load', function() {
var editbox = document.getElementById("elm_editable")
editbox.addEventListener('keyup', (e) => {
// and here is how to detect the enter key
if (13 === e.keyCode) {
alert("this should appear");
}
});
});<main contenteditable="true" id="elm_editable">
<div class="box" id="editable">
text
</div>
</main>There is another solution. You can just detect an inputType.
const divInput = document.getElementById('divInput');
const textarea = document.getElementById('inputTypePreview');
divInput.addEventListener('input', (event) => {
const t = event.inputType;
textarea.innerHTML = `${t} \n`;
if (t === 'insertParagraph' || t === 'insertLineBreak')
textarea.innerHTML = 'Enter detected \n';
});#inputTypePreview {
margin: 1em 0 0;
}
#divInput, #inputTypePreview {
border: 1px solid #b1b0b0;
border-radius: 3px;
width: 100%;
resize: none;
}<div id="divInput" contentEditable="true"></div>
<textarea id="inputTypePreview" disabled></textarea>