0

I am trying to allow the user to click on a span element and change the text according to what they type along with the original textcontent.

container.addEventListener('click', (event) => {
   if (event.target.classList.contains('targetSpan')){
                targetSpanText = event.target.textContent;
                document.addEventListener("keydown", (event) => {
                    targetSpanText.textContent += `${event.key}`;
                });
            }
        });

The textcontent does not seem to update, although the the keydown event listener is working.

Leblanc James
  • 17
  • 4

2 Answers2

2

Using the contenteditable attribute seems fitting in this case:

/* Just some styles for this snippet */ .targetSpan { background-color: hsla(0, 0%, 50%, 0.15); font-family: sans-serif; font-size: 1.5rem; padding: 0.25rem; }
<span class="targetSpan" contenteditable="plaintext-only">You can type here</span>

Here's a second example (prompted by this comment) with a checkbox control for toggling a simulation of plaintext mode:

const span = document.getElementById('text');
const input = document.querySelector('#toggle');

const setPlaintext = () => {
  span.textContent = span.textContent;
};

const update = () => {
  if (input.checked) setPlaintext();
};

input.addEventListener('change', update);
span.addEventListener('input', update);
/* Just some styles for this snippet */ body { font-family: sans-serif; } #text { background-color: hsla(0, 0%, 50%, 0.15); font-size: 1.5rem; padding: 0.25rem; }
<label><input id="toggle" type="checkbox" /> plaintext</label> <span id="text" contenteditable="true">You can type here</span>
jsejcksn
  • 27,667
  • 4
  • 38
  • 62
  • From MDN: `The attribute must take one of the following values: true or an empty string, which indicates that the element is editable, OR false, which indicates that the element is not editable.` – FiddlingAway Jan 06 '23 at 19:13
  • [^](https://stackoverflow.com/questions/75035024/how-do-i-allow-a-user-to-change-span-textcontent-after-clicking-on-the-span-elem/75035112?noredirect=1#comment132414067_75035112) @FiddlingAway Thanks, I saw that. The [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable#browser_compatibility) section of the same MDN document also lists the other enumerated values… perhaps they are legacy values. At any rate: that’s why I included the `input` event listener callback. – jsejcksn Jan 06 '23 at 19:28
  • The JS part isn't working, though (on Firefox). Chrome seems to have no issues with the attribute, however (and both the MDN table, and [caniuse](https://caniuse.com/?search=contenteditable) seem to agree with that). Any idea on why the JS fails for FF? – FiddlingAway Jan 06 '23 at 19:35
  • [^](https://stackoverflow.com/questions/75035024/how-do-i-allow-a-user-to-change-span-textcontent-after-clicking-on-the-span-elem/75035112?noredirect=1#comment132414380_75035112) @FiddlingAway “_isn’t working_”: What do you mean by that? What are your specific expectations which aren’t being satisfied? – jsejcksn Jan 06 '23 at 20:37
  • Clicking on the span, and trying to type in it does nothing. That is to say, the contents of the span are unchanged. – FiddlingAway Jan 06 '23 at 20:46
  • [^](https://stackoverflow.com/questions/75035024/how-do-i-allow-a-user-to-change-span-textcontent-after-clicking-on-the-span-elem/75035112?noredirect=1#comment132415543_75035112) @FiddlingAway I guess that's due to FF not supporting the "plaintext-only" value. I've added a second example. Does it work as expected for you in FF? – jsejcksn Jan 06 '23 at 21:39
0

I think the recommendation is to use the getElementById() method of document in order to manipulate the contents of a span tag. It seems your code is not using it. Why you may not be getting the results you expect.

There's a few examples for changing the text in a span element in this post How do I change the text of a span element using JavaScript?

Chuck
  • 192
  • 2
  • 11