Count displayed lines in textarea using JavaScript or jQuery - javascript

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

Related

How to append newline to text value in javascript array?

I have a narrow button that contains an image and label text. The state of the button changes to one of several values which are stored as text in an array and then changed out with textContent.
One of the values forces a line break in the label text. I would like to reserve the "blank line" below my label so that layout isn't affected every time the label breaks to two lines of text. To accomplish this, I'm trying to append a newline to every single-line value. For layout reasons, I can't simply pad the container — I need it to match the height of a line of formatted text.
Is there any way to put a newline into a text array value? I've tried adding a CR to my text both within the array and prior to the array as a variable using:
Labelname + \n
Labelname\n
Labelname<br /> (HTML, I know)
var label = 'Labelname' + String.fromCharCode(13)
Nothing seems to make the newline "stick," and the console reveals the value "Labelname" without the newline.
HTML generally ignores whitespace (including newline characters). To have it rendered, you need to use an element that doesn't ignore whitespace (like <pre>), or opt in to <pre>-style whitespace handling via CSS with white-space: pre-wrap.
I ended up using innerHTML to put formatted text into the element. I was resistant to using it for various reasons, but it provided a straightforward solution to this problem.

Unexpected token illegal and five red dots show on JavaScript error?

I have gotten a javascript error when trying to remove an attribute of type required. 5 red dots have appeared behind the script which i am unsure what they mean.
How can i remove the attribute of required?
What are those red dots?
Edit:
$("#FileUpload").change(function () {
var fileName = $(this).val().replace("C:\fakepath\", ");
$("#FileName").html(fileName);
$("#HasNewFile").val("True");
$('#selectVehicleMake').removeAttr('required');​​​​​
$('#selectVehicleRange').removeAttr('required');​​​​​
$('#selectVehicleModelCode').removeAttr('required');​​​​​
$('#selectVehicleModel').removeAttr('required');​​​​​
$("#btnMatch").click();
});
I have had this in two occasions and found that in both it was because there were white spaces behind the code. Best fix i found is to cut that code and paste it into note pad, the make sure there are no white spaces behind the text. You can check this by clicking behind the text and clicking backspace.
Copying code from some code - "fields" > like stackoverflows have a hidden char in the element.
After copying to VS:
When copied into Text Editor (i used brackets)
I've found that the dot appears while inspecting the copied element:
So it seems to stem from jquery's prettyprint. and this is what it is

Contenteditable div: save and restore caret position when is positioned in empty new line

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

Break line when one single character is left at the end of div

I have a a simple div, where I call some variable from database with php.
Div has for example 500px and it must stay at this width. And I get something like this:
http://i.stack.imgur.com/32x4m.jpg
You can see the "w" at the end of the line, and since it's called by php, I can't manually put break line code there. Is there any solution, that will automatically enter br or something, when after the last space in line there is one or two symbols left? I don't care if it is php or jquery or whatever :)
thanks!
Add {word-wrap:break-word;} to the style of your div.

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.

Categories