We Keep Coding

Simulate paste into Textarea with javascript

When pasting data from the clipboard into an html textarea, it does some pretty cool parsing to make the paste look close to what was copied as far as newlines go.
For example, I have the following html on a page that I select (everything highlights in blue) and then I copy it:
Hello
<br>
<br>
<br>
<div>more</div>
<div>last</div>
So to be clear, what I am copying is what the output of this jsfiddle looks like.
Now when I paste this magical, copied text into a text area, I see exactly what I would expect: "Hello", empty line, empty line, empty line, "more", "last". Cool! Then when I use jQuery's .val() on the textarea, I get "Hello\n\n\nmore\nlast". Super cool. It took the br's and div's and was able to infer the correct newlines from it.
Now...
What I am trying to do it programmatically take the same data I copied earlier and set it as the textarea's value as if it were pasted.
Here is what I have tried...
So, say the stuff I copied earlier was wrapped in a <div id="parent">...</div>.
var parent = $("#parent");
var textarea = $("#theTextArea");
// Set the value of the text area to be the html of the thing I care about
textarea.val(parent.html());
Now I know this isn't the same as a copy-paste, but I was hoping it would take care of me and do what I wanted. It doesn't. The textarea gets filled with Hello<br><br><br><div>more</div><div>last</div>. The html that was once invisible is now stringified and made part of the text.
Obviously I did this wrong. .html() returns, of course, the string of html. But is there something I could call on parent that would give me the text with all inferred linebreaks?. I have tried calling parent.text(), but this only gives Hellomorelast (no line breaks).
A few notes that could help with an answer: I am using Angular, so I have access to all their goodies and jQuery.

Edit:
Solution
It is not nice but you can try to replace html tags with line breaks '\n' or do some line breaks in the html file and get the content with text().
var parent1 = $("#paren1");
var textarea1 = $("#theTextArea1");
var parent2 = $("#paren2");
var textarea2 = $("#theTextArea2");
// Set the value of the text area to be the html of the thing I care about
var text = parent1.html();
text = text.replace(new RegExp("<br>", 'g'),"\n");
text = text.replace(new RegExp("<div>", 'g'),"");
text = text.replace(new RegExp("</div>", 'g'),"\n");
textarea1.val(text);
textarea2.val(parent2.text());
JSFiddle

replacing text in two different forms, how to reach text in a nested label through its div

I have a setup, where input values get sent to replace the option text in a select list. that's working fine. thing is, i want that same text to also replace the text in a different place in the doc as well- the additional text i want to change is inside a label in a form plugin and i cant put an i.d in the label tag. so my questions is what vanilla javascript do i need to reach the text and replace it with the text from the first input?
the markup thats working ok:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
...many of these. targeting:
<select id="select1">
<option id="char_name1" value="1">1st</option> ...</select>
(equivalent number of options...)
with
<script>function change1(eet){
document.getElementById("char_" + eet.id).text =
document.getElementById(eet.id).value;}</script>
i would like to replace what in the follow markup:
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
cant add an id to the lable, and the frm_primary_label class is used many times so i cant target the specific text through it (need to go through the div id). any help on the proper markup would be appreciated.

If there is only 1 element under the div, you can just use getElementsByTagName so you could possibly have a code snippet something like this:
var fieldContainer = document.getElementById("frm_field_53_container");
var label = fieldContainer.getElementsByTagName("label");
label[0].innerHTML = document.getElementById(eet.id).value;

I'm not entirely clear on what you want, but I think document.querySelector is what you're looking for:
document.querySelector("#frm_field_53_container label").text = 'new text';
Browser support:
http://caniuse.com/queryselector

Hidden div with html string and move content to span and then encode string to html

I have a small problem with the content I'm hiding in my hidden td element
<td class="hidden">
<span class="taxDescription hidden">#Html.Raw(#benefit.TaxDescription)</span>
</td>
and I want to move it into this span but I don't want to lose my html encoding of the string using JS or JQuery.
<div class="spanDiv">
<span class="taxDescription">#Html.Raw(((Model.EmployerBenefits.Any()) ? Model.EmployerBenefits[0].TaxDescription : ""))</span>
</div>
The code I have for this right now is as follows:
$(".benefitsList .benefitListItem").click(function () {
var taxDescription = $(this).find("span.taxDescription").text();
$("div.top span.taxDescription").html(taxDescription);
});
but the thing is that I lose my TinyMCE formatting of the string and just gets plain text
I think the problem is just under my giant nose and I just can't seem to find it.
If this is to little information please point it out and ask for more an I'll try to provide you with it! :)

Hope it will help - you were grabbing text and then inserting it as html.
$(".benefitsList .benefitListItem").click(function () {
var taxDescription = $(this).find("span.taxDescription").html();
$("div.top span.taxDescription").html(taxDescription);
});

Need Solution on NicEdit Insert HTML text into Instance

i am using this function to insert text into NicEdit,
function insertAtCursor(editor, value){
var editor = nicEditors.findEditor(editor);
var range = editor.getRng();
var editorField = editor.selElm();
editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
value +
editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);}
This code works fine for simple text but when i pass HTML content into it, it does not render the HTML output in div instead it dumps the HTML code as it is into the Instance Div.
Example:
<div class="one">Some text here</div>
This must show in the Instance as "Some text here"
and remaining code hidden in source code.
Can any one give me a solution to fix this problem?

After working whole night and trying different solutions I had finally got it working! :)
In case any one wants to know solution for this, I had to add a Replace function
replace()
for the content and made it support HTML.

See my answer HERE. It's a plugin I created to insert html at the cursor position.

Add various predefined "tags" to a text field on click

This will probably be a very easy question to answer. I am creating a form for a simple "contact manager" type php based site, with a basic data-base. I have a text field in which multiple tags can be added each profile. Currently, this is done manually. The client would like me add a predefined list of "tags" they can click on which will then add the appropriate text to that field. I was thinking I would hard code in the tags, and then use the title tag to contain the text which would be added to the field. Does anyone have any suggestion on how to do this, or alternate suggestions? This would be adding text to an already existing field (separated by comma, preferably the comma wouldn't be part of the text I am passing. I would like to automatically have a comma appear after each tag is added.
The alternate request was to create a series of check boxes, but I thought this might make searching the easiest. I realize this is probably super simple, but I am more of a design guy, so if anyone could point me in the right direction or provide any suggestions, it would be much appreciated. Also, I might have to have more than once instance of this on a page, so I might have to have more than one function for this. Thanks!

You want something like the following:
<script type="text/javascript">
function addToValue(el, s) {
if (typeof el == 'string') el = document.getElementById(el);
el.value += (el.value.length > 1)? ', ' + s : s;
}
</script>
<textArea id="someText"></textarea>
<button title="foo" onclick="addToValue('someText',this.title)">Add foo</button>
<button title="bar" onclick="addToValue('someText',this.title)">Add bar</button>
<button title="baz" onclick="addToValue('someText',this.title)">Add baz</button>