Unable to input spaces into a span, inside a button in Firefox

Question

I have a button element, which needs to have text which can be modified dynamically. I was having trouble with adding spaces which is when I refered this answer to have a span, which is contenteditable. During this time, I was testing on Chrome and it was working.

However, when I was testing this feature in Firefox, I was not able to insert spaces in the span element. I do not see anything about this online either. Is there anyway I can have this supported on Firefox too?

I should also note that, I am doing this for an Extension that I am building for Chrome and Firefox.

This is what my code looks like:

<!-- HTML --> <button id="editableBtn"> <span id="titleText" contenteditable="false" style="border: solid; border-color: green;">Button</span> </button> <button id="editorBtn">Click me to edit</button> <!-- JS --> <script> var spanText = document.getElementById("titleText"); var editableBtn = document.getElementById("editableBtn"); var editorBtn = document.getElementById("editorBtn"); spanText.addEventListener('keydown', (event) => { console.log("Span keydown = ", event) }) editorBtn.addEventListener('click', (event) => { spanText.contentEditable = "true" }) </script>

Firefox Version: 110.0

Google Chrome Verion: 110.0

rphv · Accepted Answer · 2023-02-21 04:50:04Z

You could add an event listener to the span element for the "keydown" event, so when the space bar is pressed it manually inserts a space character at the current cursor position.

var spanText = document.getElementById("titleText"); var editableBtn = document.getElementById("editableBtn"); var editorBtn = document.getElementById("editorBtn"); // modified from https://stackoverflow.com/a/2925633/1612562 function insertTextAtCaret(text) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(text)); // un-select the newly-inserted text node and place cursor behind it range.collapse(); } } else if (document.selection && document.selection.createRange) { document.selection.createRange().text = text; } } spanText.addEventListener('keydown', (event) => { if (event.keyCode === 32) { // 32 is the keycode for the spacebar // prevent default behavior, since we're handling it ourselves event.preventDefault(); // insert the space character at the current cursor position insertTextAtCaret(' '); } }); editorBtn.addEventListener('click', (event) => { spanText.contentEditable = "true" });

<button id="editableBtn"> <span id="titleText" contenteditable="false" style="border: solid; border-color: green; white-space: pre-wrap">Button</span> </button> <button id="editorBtn">Click me to edit</button>

Isn't document.execCommand deprecated? Is there any alternative command which performs similar to document.execCommand?
Yes, there is. I've modified the answer to use window.getSelection as detailed in this answer. The addition of range.collapse() places the cursor at the end of the inserted space character.

Collectives™ on Stack Overflow

Unable to input spaces into a span, inside a button in Firefox

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related