Browsers inserts automatically a word break when text reaches the end of the box.
I would like to make this "invisible" to real \n.
Here is what I have tired:
http://jsbin.com/uraneq/1/edit
Example:
You can try to use wrap="hard" attribute for TEXTAREA element. Older browsers support physical value which has similar meaning as hard (but is invalid at least in HTML5).
will not be auto inserted by the browser itself so you cannot match it in auto broken text.
however.. you can match line length to see when there might be a possible linebreak (in case you use a block font)
Related
When I say line, I mean wrapped line as displayed in the textarea. A long line will wrap to multiple lines. If a line (ending with newline) wraps into three lines, the count has to be three.
The problem is that line breaks happen not just at spaces but also at other character sequences. For example in Firefox, aaaaaa*<bbbbbb will break after * if there's not enough space in the same line.
What this means is that we can't simply use the number of characters that can fit in the textarea's width and spaces to figure out the number of displayed lines. Obviously, counting newlines is not useful since it ignores wrapping. There's a way to force newline insertion at line breaks by using the textarea attribute wrap="hard". As I understand, this happens only when the form is submitted to server. This is not a suitable solution since we wish to do counting in JavaScript.
Another variant of the problem question is, "Is there a way to move the cursor to next displayed line?" I tried the following but this doesn't move the cursor at all, it only "mimics" down arrow key event:
var e = $.Event( "keydown", { which: 40 } );
...
$(this).trigger(e);
How to add multi line place holder text in textarea? .
I got a solution like following but its not working im mossilla, safari.
Chrome works this way..
$('#nameTxtBox').attr("placeholder", "League Name \n 1-2 lines most designs");
Unfortunately multi-line placeholders are not supported as a rule. Chrome does allow for newline characters, but support across platforms can be spotty. The recommended course of action would be to create shorter, single-line placeholders. If you absolutely need a multi-line placeholder, you can try this:
<textarea style='white-space:pre;' placeholder='Line 1
Line2'></textarea>
By adding the css attribute white-space:pre, you force the textarea to treat the placeholder text as preformatted text. Again, though, support is spotty.
Try This code
just add "
" before the new line without space.
<textarea placeholder='First Line
Second Line
Third Line' rows="5"></textarea>
I need to save and restore the caret position as the user types in a contenteditable div (the html written is edited and re-inserted with each key pressed).
I've read and succesfully used this solution by Tim Down to a similar question: https://stackoverflow.com/a/13950376/2086428.
The problem occurs when the caret is positioned in an empty line, it will be restored to the previous non-empty line (try it here, add a new line and save / restore the cursor).
In the comments section of the solution proposed one user had the same problem, the author of the solution hinted to convert the <br>s into characters.
How can I do this?
Are there any simpler solutions?
PS: I can't use rangy for this project.
From this answer:
The solution is to make sure, that every "br" tag is followed by a newline character (\n).
This won't hurt the HTML content in any visible way, but now all HTML breaks are translated to plain text line breaks as soon as range.toString() is being called.
<br>\n
Working example here: http://jsfiddle.net/gEhjZ/95/
For comparison, example, which has problem (without \n after "br"): http://jsfiddle.net/gEhjZ/94/
You can listen to keydown; every time Enter key is pressed check if there are some character(s) in the same (or next sibling) text node immediately after caret position (you will receive event before the line is broken). If not add after caret position and then save the position.
Some of these utilities can be useful:
https://github.com/MailOnline/milo/blob/master/lib/util/dom.js
https://github.com/MailOnline/milo/blob/master/lib/util/selection/index.js
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.
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 " " 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")