Enter Not Working in document.getElementById.value - javascript

right now i m using \n to enter line break
document.getElementById('inputarea').value = "<h1>\nHead\n</h1>";
i want to write code as
document.getElementById('inputarea').value = "
<h1>
Head
</h1>";
but its not working. I m displaying value in text area.
suggest any way to display code without using \n or br.

Use HTML Backtick (`) instead
Check the snippet
document.getElementById('inputarea').value = `<h1>
Head
</h1>`;
<textarea id="inputarea"></textarea>

Related

How to Ignore HTML Tags when Using document.write

I have this line of Javascript code that is supposed to show the line
document.write(\" <textarea name=\"Text1\" cols=\"+col+\"rows=\"+row+\" id=\"textbox\" style=\"HelveticaNeue-Light\">\");
This is done by using document.write. So it is basically
document.write("document.write(\" <textarea name=\"Text1\" cols=\"+col+\"rows=\"+row+\" id=\"textbox\" style=\"HelveticaNeue-Light\">\");");
Firstly, I pass the above string to an array, and then later on in the program display it using document.write.
The problem is that when display it, it actually makes a text box and shows it. I believe this is happening because HTML just goes through and checks for tags, regardless of their position in quotes, etc.
How do I fix this? I just want to display the actual line, not the output from the line. Is there anyway to do this? Can I use something different than document.write? Can I output it to a text box that simply display it? Is that enough?
You need to escape the tags. These symbols: < > must be encoded as < >.
Your example should be similar to this:
document.write(" `<textarea name=\"Text1\" cols=\"+col+\"rows=\"+row+\" id=\"textbox\" style=\"HelveticaNeue-Light\">");
Replace < by < and > by >
Try this :
document.write("document.write(\" <textarea name='Text1' cols=\"+col+\" rows=\"+row+\" id='textbox' style='HelveticaNeue-Light'>\");");
You can add your string directly to an element by setting its innerText:
var myDiv = document.getElementById('myDiv');
myDiv.innerText = '<p>These p tags will be displayed as text</p>';
You to HTML encode it, like so
document.write("document.write(\" <textarea name=\"Text1\" cols=\"+col+\"rows=\"+row+\" id=\"textbox\" style=\"HelveticaNeue-Light\">\");".replace('<', '<').replace('>', '>'));

Replace html with html using Javascript

I want to replace a big section of html code (the content on the side) with other html code.
I have used the JavaScript code below:
document.getElementById("content").innerHTML = "";
The thing is that I can't replace html code that got the "" characters in it. Can someone please help me?
I should ad that I´m a beginner with JavaScript and as of now I want to stay away from jQuery.
try with
document.getElementById("content").innerHTML ='text to be replaced with "" ';
or with
document.getElementById("content").innerHTML ="text to be replaced with \"\"";
or with
document.getElementById("content").innerHTML ='text to be replaced with \'\'';
( \" is the escape sequence for the character " and in javascript you can use either ' or " for the strings)
here the jsfiddle sample

remove line break that appears after a certain text from textarea

how do I remove line breaks or empty lines that appear after a certain text in a textarea box. I tried something like this:
$('#mytextarea').val($('#mytextarea').val().replace('some_Text' + "\n", ''));
But that didn't work
var newVal = $('#mytextarea').val().replace(/some_Text[\r\n]+/, 'some_Text')
I found this regex JavaScript line breaks
$('#mytextarea').val($('#mytextarea').val().replace(/(\r\n|\n|\r)/gm,""));
I'm just concentrating on the regexp part of the question:
Sample Text and Replacement Code
"some texts are better than others, some_text\nsome_text\r\nsome_text\rok? some_text"
.replace(/(some_text)[\r\n]+/g, '')
Result
"some texts are better than others, ok? some_text"

HTML5 Href "sms" content with break line tag?

I want to use html link href to text message(sms) in android smart phone.But i try want the breakline in my message content.I have to display my message in messengers like below
"adgsd
sdgsf
asdfdf"
I try use "< br >","< br/ >","/n","/r" also cant break line.
Any Idea?Below is sample code with replace the < br > to other tag.
link = "smsto:" + "601" + "?body=" + document.getElementById("DetailContent").innerHTML.replace(/<br>/g, '\n');
document.getElementById("smsDetailLink1").setAttribute("href", link);
"%0D%0A"
with this format can get break line.
For anyone wondering, the answers given above are just the hex ASCII codes for the DOS/Windows line ending CR-LF (\r\n), i.e. carriage return and line feed. A lot of you probably knew that, some may not.

HTML textarea ignores 1st new line character, why?

Could you explain why this:
<script type="text/javascript">
document.write("<textarea cols='10' rows='10'>" + "\nhello\nbabe\n" + "</textarea>");
</script>
renders a textarea with one new line at the bottom, but NO new line at the top?
Tested IE8, FF11, Safari 5.1, Chrome 24
And it's not a JS issue, even when you write HTML in page you get the same result, i.e.
<textarea cols='10' rows='10'>
hello
babe
</textarea>
The 1st new line is still missing!!!
I need to add another new line at the top in order to show one:
document.write("<textarea cols='10' rows='10'>" + "\n\nhello\nbabe\n" + "</textarea>");
When writing inside of XHTML use proper entities.
<textarea>
hello</textarea>
If a text node begins with white space (space, new line) it will be ignored by HTML parsers. Encoding the new line into a proper HTML entity forces the parser to acknowledge it.
== carriage return
Answering the question "Why". This is specified in HTML 5 specification in the chapter that describes how DOM tree is created from tags found in a HTML document.
In the current HTML 5 living standard it is "12.2 Parsing HTML documents" > "12.2.6 Tree construction" > "12.2.6.4 The rules for parsing tokens in HTML content" > "12.2.6.4.7 The "in body" insertion mode".
(In HTML 5.2 the same section is numbered 8.2.5.4.7).
Scroll down for item "A start tag whose tag name is "textarea""
A start tag whose tag name is "textarea"
Run these steps:
1. Insert an HTML element for the token.
2. If the next token is a U+000A LINE FEED (LF) character token, then ignore that token and move on to the next one. (Newlines at the start of textarea elements are ignored as an authoring convenience.)
3. Switch the tokenizer to the RCDATA state.
...
The algorithm deals with LF characters only, because CR characters are handled earlier.
(Historically, looking into obsolete HTML 4.01 specification:
Its Chapter 17.7 "The TEXTAREA element" has an example that shows that text content for a textarea starts from a new line.
Appendix B.3.1 Line breaks (informative) explains that such behaviour originates from SGML.)
A line break character before </textarea> end tag is not ignored nowadays, in HTML 5.
If possible, change your code to have the textarea pre-defined as html, then write the string like this instead:
HTML:
<textarea cols='10' rows='10' id='test'></textarea>
Script:
document.getElementById('test').innerHTML = '\nhello\nbabe\n';
That should preserve white-space. Optionally you can add a css rule:
textarea {
white-space:pre;
}
A fiddle to play with:
http://jsfiddle.net/RFLwH/1/
Update:
OP tested in IE8 which this does not work - it appear to be a limitation/bug with this browser. IE8 do actually use CR+LF if you manually insert a line-feed at the top, but when set programmatic this is completely ignored by the browser.
Add this to the html to do a test:
<span onclick="this.innerHTML = escape(document.getElementById('test').innerHTML);">
Get textarea content
</span>
You can see the string returned is:
%0D%0Ahello%20babe%20
meaning the CR+LF is there (the other line-feeds are converted to spaces - but inserting a space at the beginning does not help either). I guess there is nothing you can do about this behavior; the browser is obsolete (but unfortunately still widely used so this can be a problem for those users if this is essential).
Add a whitespace before the first "\n" like this :
<script type="text/javascript">
document.write("<textarea cols='10' rows='10'>" + " \nhello\nbabe\n" + "</textarea>");
</script>
or
<textarea cols='10' rows='10'> <!-- whitespace here -->
hello
babe
</textarea>
otherwise it won't work.
Update:
Later in your server side, you can remove the first whitespace by doing
$str = ltrim ($str,' ');
or
$str2 = substr($str, 4);
if it is PHP.
It should be a \n\r at the top:
document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");
jsbin
Finally i finished with this server-side solution:
to double leading(only first!) nl symbol before output it in textarea:
if(str_startswith("\r\n",$value))
{
$value = "\r\n".$value;
}elseif(str_startswith("\n",$value))
{
$value = "\n".$value;
}elseif(str_startswith("\r",$value))
{
$value = "\r".$value;
}
function str_startswith($start, $string)
{
if(mb_strlen($start)>mb_strlen($string))
return FALSE;
return (mb_substr($string, 0,mb_strlen($start))==$start);
}

Categories