4

I am creating a typing trainer page where the user can practice their typing. Consider the following:

HTML:

<div>
  <input type="button" value="Start!">
</div>
<div id="cd">
  <span id="time"></span> left!
</div>
<div data-placeholder="Some text goes here." id="ph">
    <div contenteditable="false" id="ed"></div>
</div>

https://jsfiddle.net/y7nwju6p/8/

As the user types, the character turns blue if it's correct and red if it's incorrect. Everything works correctly, as long as the text isn't more than one line. See the following:

https://jsfiddle.net/nce4zqeu/30/

The problem is that I am replacing characters in the placeholder with spaces as the user types so that it looks like they are disappearing. Once this amounts to an entire line of spaces, the text wraps incorrectly. Is there any way to make it so that it wraps correctly?

Thank you for your help.

James Pritchard
  • 43
  • 4

1 Answers1

1

The problem with your current implementation is that you need to insert nonbreaking space, in this post (javascript nonbreaking space) I found out that '\xa0' is the raw char for non breaking space.

After modifying your snippet in the following lines (144 and 147) from "\u2008" to "\xa0" it worked like a charm.

enter image description here

Edit

I discovered two issues in this code snippet, the first one is that "\u2008" doesn't work as expected on firefox (the spaces dissapeared from the placeholder), so "\xa0" is better to use in this case (worked in chrome and firefox).

The second one, is the issue that the author describes in this question, the answer was to use:

word-break: break-all; // this does the job in firefox
word-break: break-word; // this does the job in chrome

These properties must stay in that order so firefox can use only the first one and ignore the second one (because is not supported), and chrome will understand both of them but will ignore the first one and use the second one (because of the cascading nature of CSS).

Rodrigo Ferreira
  • 1,091
  • 8
  • 11
  • Did you try typing until you reached the second line of the text? That's when it stops working. I tried `\xa0` initially and it didn't work. I was trying some different spaces to see if it would make a difference, which is why it's `\u2008`. – James Pritchard Apr 16 '18 at 19:18
  • I had the exact same functionality with either `\xa0` or `\u2008`. Either way, when you type to the second line, the placeholder text doesn't wrap correctly. – James Pritchard Apr 16 '18 at 19:26
  • Have you tried to add `word-break: break-all` to `#placeholder`? – Rodrigo Ferreira Apr 16 '18 at 19:35
  • The solution for me was to insert: `word-break: break-all; word-break: break-word;` in `#placeholder` please try it, if it works I will update my answer with the explanation of why it worked. – Rodrigo Ferreira Apr 16 '18 at 19:47
  • It definitely works a lot better. But there are some situations where it does not. If you play around with the width of the box and try it a few times, you will see. Breaking the word isn't the best solution either. – James Pritchard Apr 16 '18 at 20:17