How to disable HTML formatting using innerHTML? - javascript

I'd like to generate an input field that is able to "copy" it's value into another element (in my case paragraph).
All is working so far but I got massive problems when I try to input some text strings like ...
< b> text < /b> // without the space columns
multiple backslashes
... or other HTML attributes / tags...
because changing the innerHTML will format this text into HTML text. But I want to use plain text including these tags / special characters instead.
Input some HTML text<input oninput="out1.innerHTML=this.value" type="text" placeholder="input text">
<p id="out1"></p>
----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.innerHTML=this.value" type="text" value="<b>x</b> \\ %&">
<p id="out2"></p>
How can I disable HTML formatting in this specific case (to copy exact the same text into the paragraph element without styling) without using a textfield / a second input field instead?
I thought about using .html() with jQuery but there also must be some more efficient way using only javascript.

I think you should try using Node.textContent
Because as the docs are saying:
Element.innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. However, textContent often has better performance because the text is not parsed as HTML.
Input some HTML text<input oninput="out1.textContent=this.value" type="text" placeholder="input text">
<p id="out1"></p>
----------------------------------------------------------<br><br>
Change this text:
<input oninput="out2.textContent=this.value" type="text" value="<b>x</b> \\ %&">
<p id="out2"></p>

You want .innerText rather than .innerHtml. This references the rendered text node. innerHtml, on the other hand, sets HTML content here, not simply text nodes.

Related

Javascript to fill a formatted text field on a web site

I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:
do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1
I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>
Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.
After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>
The following did not work (wrapped in Applescript):
document.getElementById('tinymce').value ='INSERT TEXT HERE';
It produces the error: "missing value".
As per #WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:
document.getElementsByTagName('p')[n].innerHTML ='Insert text here';
I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.
You need to access the <p> element, which is just after the body of the document, as such...
document.getElementsByTagName('P')[0].innerHTML = 'your text'
The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].
The innerHTML property will allow you to set the contents of the <p> element.
Following is a good JavaScript reference...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
The following reference is for the web page, or Document Object Model (DOM).
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.
http://www.tinymce.com/
Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...
document.getElementsByName('fax_text')[0].value = 'This is my text!';
document.getElementsByTagName('textarea')[0].value =
document.getElementsByName('fax_text')[0].value +
'\nThis is additional text...';
<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>
This text field is in an iFrame.
This iFrame contains an HTML document (<html><head><body>).
To get this document, you need the_iFrame.contentDocument.
do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1

How to take result text when text-overflow property is applied

I have a div with css property text-overflow : ellipsis to add ellipsis and show the text in a single line.
When I perform jquery .text() or .html(), I get the full string, but I need the exact text displaying in the div currently (not the full string).
Can some one guide me how to take the exact displaying string using jquery or JS?
Actual String = "abcdefghijklmnop"
Due to CSS, the div displays "abcd..."
My expected result (using jQuery or JS) "abcd..."
This is not possible without trying to mimic CSS and recreate the strings with the ellipsis using JS.
The reason for this is that CSS only manipulates what is displayed to the user, not the HTML source itself. You can verify this by checking the source code for your document. This means that when you use .text() or .html() you get the values from the DOM, rather than what is displayed via the CSS filter.
There are a couple of hacks that does a pretty good job, but it is still no guarantee that the JS correctly mimics how CSS renders the text.
If you know the number of values you need every time then you can just use JS Like for example if it was always 4 values that gets entered in than it would be like this,
JS Fiddle
form
<form action="" method="post">
<p>
<label for="txt">My txt: </albel>
<input type="text" id="myTxt"><br />
<input type="submit" id="submitButton" value="Send">
</P>
</form>
js
document.getElementById('submitButton').onclick = function() {
myVariable = document.getElementById("myTxt").value;
alert(myVariable.slice(0, 4));
};
No matter what is typed in to the textbox it will be sliced to the first 4 characters.

Get contenteditable element value

How do I get the value of a contenteditable element?
Right now I just use innerHTML to get the content of the element, which would result carriage returns as <br> tags, so I need to convert <br> tags to \n right now.
Is there another more proper way to get the value from a contenteditable element that I just don't know about?
Update:
In a textarea element when you get the value e.g. textarea.value the content is intact, like the carriage returns. Is there a similar way to get value from a contenteditable element or I am forced to replace values?
content.innerHTML.replace(/<br\s*[\/]?>/gi, "\n")
element.textContent only gets the text, carriage returns not included. So this does not solve my problem.
If you're looking to let users edit text the only clean solution is to go with a text area as you figured out yourself.
If for some reason you can't or you don't wanna use a textarea you have write your own bit of code that will convert those <br> into carriage returns. There is no automatic way of doing this because there could be all sorts of markup in there.

HTML5 Canvas multi-line textboxes

Okay, so, essentially, I'm getting user input from an <input> tag and shoving it into a canvas. This is all well and good for one line, but there are some cases where I need whole paragraphs of text. As we are all aware, not every letter is of the same width, which means I can't have multiple <input> tags with a maxlength attribute. It's also jarring to have multiple input tags. Long story short: Is there any way to put PARAGRAPH textboxes into a HTML5 canvas element?
Why can't you go ahead and use a textarea to get multiline handling?
<textarea name="myTextArea" cols="30" rows="5" />

Why when I try to display the text inside a textarea on html it display eveything in one line?

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

Categories