In a forum, I want to copy the original post and quote it and paste into a text area using jQuery:
I found this post. However, it doesn't apply what I really need.
If you have the original text in a <div> element like so:
<div id="original">
Original text...
</div>
and the button like so:
<button id="copy">Copy Text</button>
and the <textarea> like so:
<textarea id="paste"></textarea>
You can simply use jQuery to get the value of the original and paste it into the <textarea> like so:
$("#copy").click(function() {
$("#paste").val($("original").text());
});
See this example.
So, lets say you have the "original text" in a div with the ID original, the copy button has the ID copy, and the textarea has the ID paste-here. Then this simple snippet should to it:
//When the user clicks the copy button...
$('#copy').click(function() {
//Take the text of the div...
var text = $('#original').text();
//...and put it in the div:
$('#paste-here').val(text);
});
This will replace the content of the text area with the original text. If you just want to add it to the end, do this instead:
//Take the text of the textarea, a linebreak, and the text of the div...
var text = $('#paste-here').val() + '\n' + $('#original').text();
//...and put it in the div:
$('#paste-here').val(text);
Related
I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!
Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>
I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>
I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)
The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.
I have the following which is fine, it does convert the <p> tags into <br> and wrap the whole text in a <p>. however I am seeing the html tags <p> and <br> inside the text area, how can I only see the line breaks without to see the html tags in it?
<textarea id ="usp-content"><textarea>
$(blurbt).find('p').each(function(){
$( this ).replaceWith( $( this ).text() + "<br/>" );
});
$(blurbt).wrapInner("<p></p>");
var pOnly = $(blurbt).html();
$('#usp-content').text(pOnly);
I'd simply would like to paste the plain text while keeping the line breaks visually not with the <br>
You don't need to use a contenteditable="true".
You can simple do the following:
Change $('#usp-content').text(pOnly); to:
$('#usp-content').val(pOnly.replace(/<br[\s\/]*>/gm, "\n"));
To reverse this incase you are sending the content of the textarea to server side and want html markup, simply use:
var data = $('#usp-content').val().replace(/\\n/gm, "<br>");
We cannot render the html inside a textarea we need to use a contenteditable in a div, see SO Answers here. Therefore in my case I will have to place a div with html formatted and set the textarea as hidden to get the same value as per what user sees.
<div contenteditable="true"></div>
I have contenteditable input field on my web page. What do I need to do to make it transform multi-line text into single-line, for example just like google does if you copy large amount of text into the search field?
Example - I copy such text:
This is Random text, lalalalalalala
and it's multi-line,
but that's just now what I want.
And when I paste it into my contenteditable input field, I want to get:
This is Random text, lalalalalalala and it's multi-line, but that's just now what I want.
-> entire text in one row
Use the following CSS on the element:
white-space:nowrap;
You should use the input tag like this: <input type="text"/>.
This is how I did it:
$('#paste').click(function(){
$(this).html('');
});
$('#paste').focusout(function(){
$(this).html($(this).text().replace('/n', ''));
});
Have a look at the full JSFiddle code demo
Use a text input. This is single line text field and will automatically remove line-breaks.
<input name="mySingleLineTextField" type="text" />
If you must use a textarea then you can easily format its value to remove tabs and line-breaks with a little bit of JavaScript:
<textarea name="myMultiLineTextFieldWithFormattingRemoved" onchange="this.value=this.value.replace(/([\n\r\t]+)/g, ' ')"></textarea>
eg: http://jsfiddle.net/z2rmxj4j/
As its not good form to put your scripts inline here's a little example that listens for a keyup event on all textareas that have the class 'nobreaks':
(function(){
//select all textareas having the class of 'nobreaks'
var elems = document.querySelectorAll("textarea.nobreaks");
//for each element in our collection
for(i=0; i<elems.length; i++){
//attach a function to the keyup event
elems[i].onkeyup = function(){
this.value=this.value.replace(/([\n\r\t\s]+)/g, ' ');
}
}
})()
pre {color:grey}
input, textarea {display:block; width:300px; margin:10px;}
.nobreaks {}
.nowrap {white-space:nowrap;}
<pre>This is Random text, lalalalalalala
and it's multi-line,
but that's just now what I want.
</pre>
<input type="text" value="Will replace line-breaks, text cannot wrap." />
<textarea>Default.
Wont replace line-breaks and text can wrap.</textarea>
<textarea class="nobreaks">Will replace line-breaks but text can still flow/wrap.</textarea>
<textarea class="nobreaks nowrap">Will replace line-breaks and prevent the text from wrapping.</textarea>
See https://developer.mozilla.org/en/docs/Web/HTML/Element/Input for more info on the input types.
var text = "This had line\n breaks\n in it.";
text = text.replace(/(\r\n|\n|\r)/gm,"");
alert(text);
I have extjs htmleditor with textarea. ANd i want to get selet html value.
Fiddle is here:
http://jsfiddle.net/DCGRg/76/ - you can trigger event by entering something and adding styles and then clicking on the combobox at toolbar right.
i saw the code like that, but it's not getting me html, just text is getting:
content = selection.extractContents();
//create span and wrap it around selection
fontEl = document.createElement("span")
fontEl.appendChild(content);
text = fontEl.innerHTML
The question is: how to get html from textarea?
InnerHTML only returns only the child contents, outerHTML is return with current note.
For Example:
"sample text" => using innerHTML => sample text
"sample text" => using outterHTML => <span>sample
text</span>
I changed in your code innerHTML as outerHTML like bellow please check the sample
text = fontEl.outerHTML;
I've got a text area and I'm attempting to append a div to it. I'm trying to do it with Jquery like this...
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The code runs without throwing any errors but my text doesn't appear inside the textarea. Why does this happen?
Do you want to add it to the HTML structure or simply show the HTML Code as text ?
If you want to add it to the textarea HTML structure this will not work.
What you are searching for is
$('#textArea').text(text); or $('#textArea').text($('#textArea').text()+text);
.text() sets text of your textArea
.html() would set your html Content
You can't append to a textarea. Its text content behaves like other input.
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').val( $('#textArea').val() + text);
Try:
$('#textArea').val(text);
If you don't want to render the div's contents but simply want to display the HTML inside the textarea you need to convert the HTML first:
var lt='<';
var gt='>';
var text = '<div class="item"><a class="as">q</a>test</div>';
text = text.replace(/</gi, lt);
text = text.replace(/>/gi, gt);
$('#textArea').append(text);
And the HTML for the text area should look like this:
<textarea id="textArea"></textarea>
If you do want to render the div's contents inside the textarea use:
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The HTML for the text area is the same as in the other example:
<textarea id="textArea"></textarea>
You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditable property of elements. Like
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
var ContentofDiv = $('#txtDiv').html();