spaces causing placeholder to wrap incorrectly - javascript

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.

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.
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).

Related

Limit lines of contenteditable div with taggle.js

I'm trying to create div, that looks like multiline input and is able to insert tags using taggle.js library. Now I'm struggle with limiting max lines of tags (not characters).
<div id="divinput" tabIndex="1" class="custom mcustom textarea" contentEditable>
</div>
Very simple demo looks like this:
https://jsfiddle.net/t9sabcy3/1/
Forgive me for putting taggle.css into css section below my scripts (I separated them with long /* ------------------- */ comment), can't append to head this file.
I prepared demo to stop after fullfiling first line.
Problem shows in 3 cases.
First one is simply writing all the time and accepting tags -> although it should stop at first line, the next line shows up.
2nd and 3rd case are connected, if the last tag is very long (in 2nd case less than width of #divinput, in 3rd larger), tag appears in the 2nd line (and in the 3rd case even the 3rd line shows up).
I'm unable to use input (because tags are not working there) and I've tried some options, like preventDefault (as in the demo), setting to nowrap(doesn't work), triggering backspace keydown event (keydown doesn't catch that at all) and now I'm running out of ideas.
Any help is appreciated

Truncating multiline texts with links (<a> tags) in truncated part with css

I have a div which gets populated dynamically with some text that may or may not contain a link(s).
For eg:
<div>Welcome to Stackoverflow.
Someone will provide an answer to this question.
Just sit back and relax, or go check your
mail
</div>
When I truncate it using solutions provided here, the output I get is:
Welcome to Stackoverflow. Someone will
provide an answer to this... mail
The reason this is happening is that the anchor (a) tag is an inline element while the "ellipsis" property works only on block elements. Explained here.
I can assign the last-child A tag display:block, but if it's not part of the truncated text, then the text following it breaks to a new line.
Interestingly, if I simply add a "." (period) or even a non-breaking space at the end after the link, then the truncation occurs normally and the link does not jump in after the ellipsis.
Is there a cleaner approach?
Just to add: I'm looking for a solution that need not be cross-browser, but works for Chrome, since I'm coding for CEF.
Assign "display:inline-block" to the last-child A, instead of "display:block" ;-)
UPDATE:
I read js solution proposed in thread you linked and I updated that jsFiddle into this one. Is your desired behaviour?
HTML:
<div style="width:200px; height:80px; border:1px solid red">Welcome to Stackoverflow.
Someone will provide an answer to this question.
Just sit back and relax, or go check your
mail
</div>
JS:
$(document).ready(function(){
$("div").ellipsis();
});

Preserving Newlines When Using ".text" or ".textContent". Possible? Alternatives? Workarounds?

If I grab some html from one element, then attempt to assign it as the text content of another element, newlines are not preserved (at least not in the latest Firefox and Chromium).
So, for example, the follow code (with sensible html) produces output where the newlines are replaced by spaces. Well, except the alert, which works as expected.
$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });
Here's a running example: http://jsfiddle.net/76S7z/2/
There should be some method of setting the html of one element as the text of another while preserving newlines properly.
Is this possible with "text" or "textContent"? Is there an alternative way to do this? Is there a simple workaround? A less than simple workaround?
As you've already determined, Web browsers don't normally render newline characters \n as line breaks. If you're resistent to adding the line break element <br />, you can use the white-space CSS property with the value pre-line, which will:
Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Be sure to check the property's compatibility tables before using.
<div style="white-space: pre-line;">
Look
at
these line breaks!
</div>
Here's a JSFiddle example.

javascript: stripping line breaks on an input string

I've seen lots of questions about preserving line breaks in textarea inputs, but I need the opposite. I suspect the answer to my question is not going to be a good one, but...
I'm working with a preformatted e-card (in Convio, if that helps anyone). I can add any text and HTML I want, but the data that's coming in from the form is via Convio tags and can't be changed.
Here's what I'm talking about. The textarea input is:
Hello,
How are you?
This would come into the e-card as:
Hello,<br />
<br />
How are you?
In other words, it does insert the break tags, but it also puts in an actual line break after each tag. No problem, right? That will display properly since the email reader ignores the actual line breaks in the HTML, but unfortunately additional information is prepended to the textarea input, so what comes into the e-card is really:
A message from Mr. John Smith johnsmith#xxx.com.<br />
Hello,<br />
<br />
How are you?
With the name and email address coming from other fields in the form. This, of course, displays as:
A message from Mr. John Smith johnsmith#xxx.com.
Hello,
How are you?
Here's the issue: I hate that first line. I mean I really hate it. The info is already on the e-card elsewhere and I don't want it there. It's too unfriendly, it's visually unappealing on the e-card, it almost always wraps to a second line (which looks even worse, particularly without space between that and the first line from the textarea), and it just makes me want to cry.
If everything came in as a string without the actual line breaks, I'd have no problem slicing and dicing the text to remove the first line. I could edit the input form to remove the actual breaks in the textarea input, but those two line breaks after the "A message from..." message are killing me. I can't figure out how to make the input string palatable for javascript.
I am limited to javascript--yes, I know this would be simple to do in PHP, but I don't have that option--and my webmaster and I have pretty much come to the conclusion that we can't do what I want to do. I had to double-check, though, and I'd love for someone to prove me wrong.
grab the innerHTML of which ever element has the message, and substring out the first line.
http://jsfiddle.net/Q8gu8/4/
You can match a line-break using "\n" (or \r for a carriage return). So, if I have the following string:
Foo
is
An
Apple
I can remove the first line like so:
// assume the string is stored in variable `str`
str = str.replace(/^.+?\n/, '');
... which means I'm left with:
is
An
Apple
/^.+?\n/ is a regular expression which means: match everything up to and including the first line break.
You should be able to use a regex with replace()
See this fiddle.
HTML:
<div class="replace">
A message from Mr. John Smith johnsmith#xxx.com.<br />
Hello,<br />
<br />
How are you?
<div>
JS:
var haystack = $('.replace').html();
var regex = /A message.*/;
$('.replace').html(haystack.replace(regex, ""));
Output:
Hello,
How are you?
Note that this is using JQuery for the selector.

Preserving white space in an HTML select option

I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:
01-ABC-O
02-DEF-I
However I need a way to display the blank numbers that lines up with the other elements
-GHI-O
This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for but this just prints the string "&nbsp" instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.
Let me know if any further clarification is needed.
You need to replace the spaces with and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.
You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.
When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.
You can use the pre css style on the area that you are outputting the value to.
<style type="text/css">
#element {
white-space: pre;
}
</style>
<div id="element">
stuff goes here
</div>
This will preserve all whitespace in the div element (other element types will also work) and then you don't need to worry about using the non breaking space.
Are you going to add it via scripting, you need to use Escape Codes for Space "% A0" which you then decode with unescape ()
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
logTypeList[i] = new Option(unescape(" kent Agent".replace(/ /g, "%A0")), "theValue");
Since unescape is deprecated, you may want to use decodeURI:
logTypeList[i] = new Option(decodeURI(" kent Agent".replace(/ /g, "%C2%A0")), "theValue");
More info at http://www.javascripter.net/faq/mathsymbols.htm
You can use the Unicode Character 'SPACE' (U+0020) instead of ("\u0020")

Categories