On my page I use a textarea to input a text and that text is splitted into words and added to a div. At this point there is no problem. The div has a fixed width of 600px and if the text is to long the div starts a new line. Everything pretty normal as far. Now I need to detect, that there was a linebreak, so I can move the text after the linebreak into a new div. Is it somehow possible to detect that linebreak?
I already tried the include() with /n or <br> or <br/>, also the same with matches() and regex expression how many /n are in the text but nothing seems to work. Now the question is: is there even a way to detect that linebreak and if so how would I do that?
Right now I have a javascript function that is called if an input happens in the textarea
<textarea oninput="textfield_handler()" class="form-control" id="tf-input"></textarea>
In the function I check the linebreak with an if-statement
if(lastChild.innerHTML.includes("<br/>"))
{
console.log("LINE BREAK");
}
Related
This one is a strange one and I simply cannot get my head around it. We are trying to append space to a textarea content using the following jquery,
var checkThis ='help';
$('#msg').val(checkThis+' ');
$('#msg').focus();
But when we focus on the text area we can see that the space is not added. Also, the cursor doesn't focus automatically.
I am not able to figure out if there is any other script in the code doing this. This code is actually a large piece of maintenance code, is there anyway I can find what function may be trimming the text?
Try this:
$('#msg').append(checkThis+' ').focus();
I have the following code:
<body>
<form>
<textarea id="textfield"></textarea>
<input type="button" onclick="func1()" value="Post">
</form>
<p id="para"></p>
</body>
When I type in textarea all the special tags <a>,<br> etc are ignored when I display them inside a <p> also all what I typed is displayed on one line and it doesn't even matter that I pressed return or use <br>, textarea seems to be taking html tags and turn them into a simple text.
This is the function I use to display the text area in html:
function func1()
{
document.getElementById("para").innerHTML=document.getElementById("textfield").innerHTML;
}
How do I take text from textarea and display it on screen normally(not in one line).
How do I modify textarea for a user who doesn't know how to use tags? when pressing a simple return should be translated to <br
First of all, for textareas you should use value and not innerHTML. Like this...
document.getElementById("para").innerHTML=document.getElementById("textfield").value;
Now, for the single line issue. In textarea, new lines are separated by \n. In your divs \n do not work. So you'll have to replace them with <br> tags. So rewriting your code snippet...
document.getElementById("para").innerHTML=document.getElementById("textfield").value.replace(/\r\n|\r|\n/g,"<br />");
The text in the textarea isn't html. It is just text, containing regular line break "\n". To display them, you either need to enclose the text in a pre tag, or replace the "\n" with <br>.
I would do the latter, since pre doesn't break at all if there's no break in the text, so you'll have a single long line and a scrollbar.
<textarea> does not take HTML and interprets it. I think what you are looking for is a Rich Text Editors if you want your users to be able to modify text without knowing the tag names
I have a <textarea> element. When the user fills it, you can see the spaces they made and when they pressed Enter to jump to the next line.
This is great, but when I see the HTML output, the result differs. It is an endless sentence without line breaks.
Using only HTML or JavaScript, how can I fix this?
You probably want something like:
<p style="white-space: pre-wrap"></p>
<p style="white-space: pre"></p>
<pre></pre>
pre-wrap:
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
If you are just taking what is entered in a textarea and outputing it as html, you would see this. For starters, you could replace all spaces with and all newlines with <br>. Or put the output in <pre> tags. (In either case, you will also want to replace some other characters with entities too.)
I have several paragraphs of text that are being stripped of all of their formatting by a javascript function.
I have the function doing 99% of what I need it to do already, with one minor problem.
At the very end of the text it is putting two <br><br> tags that I do not want as it just adds blank white space at the end. In other areas of the text there are double <br> tags I want to leave in place.
So my question is how do I take the entire block of text and only remove the very last <br><br> tags?
How about using regular expressions:
var text = '<br><br> Hello there... <br><br>\n<p>How are you?</p><br><br>';
text = text.replace(/<br><br>$/, '');
the $ checks to make sure you only remove the one at the end of the string.
I have a HTML <textarea> that I want to be able to make when the user pushes enter in the textarea it results in a linebreak when the string is stored in a variable and printed on the page.
How would I do this? I have seen it done before but I am not sure how to do it.
When you read the content of textarea just do this:
var text = document.getElementById(textAreaId).value.replace("\n","<br/>");
By this way, when you use the variable text, it will be able to break lines in html.
You should set the white-space property on your output to one of the pre values. See here for a list of allowed values and their effects: http://www.w3schools.com/CSS/pr_text_white-space.asp
<p style="white-space: pre;">Your text with newlines goes here.</p>
Or simply use <pre>, a HTML tag that has white-space: pre; by default, but this has the inconvenient of changing your font.
I would advise against storing <br />s instead of new line characters. If you want to have HTML breaks add them just to the output.
Assuming you are outputting as HTML, you'll need to replace the line breaks with <br> or wrap the text with the <pre> tag.
The <pre> tag defines preformatted
text.
Text in a pre element is displayed in
a fixed-width font (usually Courier),
and it preserves both spaces and line
breaks.