I have a textarea where i need to set some html text
<textarea id="text"></textarea>
<div id="elem">
<p>text</p>
<hr />
<br />
<p> some text</p>
</div>
..
$('#text').val($('#elem').html());
when I do this it's put text with html tags instead of parse it and put like a plain text.
i also tried functions append(), html(), text(). none of them helps me
text() worked for me. See https://jsfiddle.net/mgLp90em/.
What is the jQuery version you are using?
I'd recommend to use a contenteditable div element instead of a textarea as follows:
<div class="text-area" contenteditable>
<h1>Your content here</h1>
</div>
See JSfiddle demo
This should do the trick, gets only text from the children within your #elem:
$('#text').val($('#elem').children().text());
FIDDLE
Related
I have a text to speak script and it is called by Javascript on HTML like this;
<head>
<script src="speakClient.js"></script>
</head>
<body>
<button onclick="speak('type text to speak here')">Talk</button>
<div class="article">
<p>Sample text is here!!</p>
</div>
<div id="audio"></div>
</body>
Currently when 'Talk' button is pressed, the predefined text (in this case "type text to speak here") will be speak by TTS.
How to change it when button is pressed, it speaks whatever text inside div.article instead of predefined text?
Edit: Link to JS https://github.com/kripken/speak.js/blob/master/speakClient.js
Thanks in advance
You can get the textual content of an element easily with jQuery:
var textToSpeak = $('div.article').text();
Then set the onclick function dynamically:
<button onclick="speak($('div.article').text())">Talk</button>
It is better than using pure JavaScript and innerHTML property, as potential HTML tags will be stripped with this solution.
<div class="article">
<script>var text = "Sample text is here!!";</script>
</div>
<button onclick="speak(text)">Talk</button>
Give an id to the <p> tag, and then you can pull out the value by calling innerHtml.
Example:
<button onclick="speak(document.getElementById('textToUse').innerHTML)">Talk</button>
<div class="article">
<p id="textToUse">Sample text is here!!</p>
</div>
Try adding the following script to the element of which you want the text read.
onclick="speak(this.innerText);"
Is there an option to append an entire HTML code to a variable without using plus operand, each line in a new line or without using push into array.
I want to be able to be to copy paste the code between single quote with the new lines so it will be easier to edit. My first thought is to copy the code into an external file, but I am not sure how to retrieve it in such a way that it will work.
var html = '<div>
<div>
some text
</div>
</div>';
Another option I thought about, which seem a good one, is to just copy the HTML in jQuery and copy it into another DIV.
This doesn't work. I am open to 3rd party solution, not just that of the native language. Thanks.
Let's say you have the following markup:
<div id="intro">
<h2>Hello</h2>
</div>
<p>I am a paragraph, and want to be placed inside intro.</p>
You can then use jQuery's appendTo to to copy p's html, and paste it inside #intro
$(function(){
$('p').appendTo('#intro');
});
You can easily append to HTML elements using jquery (I think this is what your after):
HTML:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
JS:
$( ".inner" ).append( "<p>Test</p>" );
Becomes:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
See: http://api.jquery.com/append/
If you want to make multi line strings see: Multi-line string insert using jQuery
Some ideas
\n\ newline separator
var html = '<div> \n\
<div> \n\
some text \n\
</div> \n\
</div>';
Where those \n\ are easily insertable with a multiline-edit in any better text editor.
Using a hidden element
<div id="hidden_1">
<div>
<div>
some text
</div>
</div>
</div>
[id^=hidden_]{ display:none; } // CSS for any ID that starts with "hidden_"
var html = $('#hidden_1').html();
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.
I have a contenteditable div that acts as a textarea:
<div class="post" placeholder="Write a comment..." contenteditable="true"></div>
How can I empty the div through JS/JQuery so that it's clear of all values?
I've tried $(".post").html(""); but it doesn't work properly.
Please help.
$(".post").empty();
demo
jquery empty
In pure javascript a simple elm.innerHTML=''; should work just fine:
<div class="post" placeholder="Write a comment..." contenteditable="true">
</div>
<button onclick="
document.getElementsByClassName('post')[0].innerHTML='';
">clear</button>
Note that a div doesn't have an placeholder-attribute, you'd have to substitute a simple function for that, containing just one line:
for( var elms=document.getElementsByClassName('post'), L=elms.length
; L--
; elms[L].innerHTML=elms[L].getAttribute('placeholder')
);
Here is a working jsfiddle of the above.
Hope this helps!
EDIT:
Not all browsers will have a flashing type cursor! Instead they often just clear the div and since the height shrinks back to 0 px you'd have nothing to hold on to, so to fix this, naturally you'd need something to select and reset your placeholder text:
<div class="post" placeholder="Write a comment..." contenteditable="true">
</div>
<button onclick="
var elm = document.getElementsByClassName('post')[0];
elm.innerHTML=elm.getAttribute('placeholder');
">clear</button>
Working jsfiddle here.
I have a bit of a problem and I'm not sure if it's possible with js.
Lets say I have a p Element.
<p class="test> text text text </p>
Is it possible that jquery would be able to turn the statement above into this.
<div class="new_created">
<p class="test> text text text </p>
</div>
All on run-time and assuming I can't manually modify it myself.
Would appreciate any help on this. Thanks
You can use .wrap() wrap elements with another element
$('.test').wrap('<div class="new_created"/>')
Demo: Fiddle
Suppose your HTML looks like this
<div>
<p class="test">text text text</p>
</div>
Then, you can do
$('.test').wrap($('<div class="new_created">'));