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.
Related
I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.
This is my code:
<div class="col-sm-9 col-md-10 message-list">
This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
<button type="button" class="button save sign_btn" data-action="save">Save</button>
</div>
</div>
and this is the js part:
$(document).ready(function() {
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('display','none');
$(".view-message").fadeIn('slow').css('display','block');
});
});
I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.
Use: height: 0; overflow: hidden;
instead of: display:none
It works for me.
Can you try setting visiblity hidden instead of display:none ?
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('visibility','hidden');
$(".view-message").fadeIn('slow').css('visibility','visible');
});
});
CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.
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
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 am pretty new to JavaScript and hope someone can help me to find a solution for the following:
I have a div with some text in it and an onclick event.
How can I manage that when you click on the div it shows the text inside the div within a textarea and a button above it - similar to how you can edit your own comments on this page here ?
How it looks on default:
<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>
How it should look on click:
<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>
Many thanks for any help with this, Tim
Try this
function youAreLookingFor() {
var awesomeText = $(this).html();
var $form = $(this).parent();
$(this).remove();
var textArea = '<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">'+ awesomeText +'</textarea>'
$form.append(textArea);
}
If you mean to give a different myBtn and myArea name for each clickable link, then you should give the clickable div an id too and start from there to create the id for the textarea and the button.
There is another way out to make what you want i.e. to make editable div using an HTML property contententeditable=true. You may use the following syntax:
<div contenteditable=true>
contents here
</div>
This facilitates copy+paste image in the div as well as textual edits i.e applying fonts on the texts using keyboard shortcut etc.
Check this fiddle
If you want to use only javascript DOM elements , then
<html>
<head>
<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>
<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>
</body>
</html>
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<textarea id="one" class="inner">
Goodbye
</textarea>
</div>
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
$("#one").append("your text to append");
LIVE: http://jsfiddle.net/tGFmq/
how can i make automatically scroll to down in this textarea?
Add this bit to your code (preferably at the end of whatever inserts you have):
var psconsole = $('#one');
if(psconsole.length)
psconsole.scrollTop(psconsole[0].scrollHeight - psconsole.height());
See this Live Demo: here
To calculate the bottom scrollTop, you can simply subtract the height from the scrollHeight:
var oneDiv = $("#one");
bottom = oneDiv.prop('scrollHeight') - oneDiv.height()
Then you can set its scrollTop to bottom, or use amazing jQuery's animate() for cool animation.
Live Demo: here
I realised my problem was that I had the code in the incorrect place. -> Placed under the element and got the problem to solve (rookie mistake....) -- Just a reminder to all.