Select All Text Inside Paragraph - javascript

I have a bunch of paragraphs that are editable. I'm trying to select the contents of the paragraph when clicked, so you don't have to manually select it to modify the value. (Select all the text inside, delete it and write something else)
<p contenteditable="true" class="dbrEditableData" id="summary_pop_post_discount_dollars">EDIT ME</p>
<p contenteditable="true" class="dbrEditableData" id="summary_adjustment_debit">CHANGE ME</p>
I'm listening for the focus of the class dbrEditableData, but nothing happens when clicking the paragraph.
$(".dbrEditableData").on("focus", function () {
console.log("FOCUS");
$(this).select();
});
Any help on achieving this would be appreciated.

You can use the Selection API to do that, here is an example:
$(".dbrEditableData").on("focus", function(e) {
document.getSelection().selectAllChildren(e.target); // select all content
document.getSelection().deleteFromDocument(); // delete the selection
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p contenteditable="true" class="dbrEditableData" id="summary_pop_post_discount_dollars">EDIT ME</p>
<p contenteditable="true" class="dbrEditableData" id="summary_adjustment_debit">CHANGE ME</p>

Related

JQuery Selectors - How can I copy to clipboard with different ids

<h3>Something here</h3>
<p id="copythis">Copy this code</p>
<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>
<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>
<script type="text/javascript">
$(document).ready(function(){
$('#copythis').click(function(){
var text = $("#copythis").get(0)
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
});
</script>
I have different texts to copy (not all at once).
this code works for one text only. How do I work for more than one?
I just changed this part and it worked:
```var text = $(this).get(0)```
Thaks to #wahwahwah
$('#copythis').on("click", function(){
console.log($(this).text() + ": you clicked on '#copythis' ");
});
$('.copy').on("click", function(){
console.log($(this).text() + ": you clicked on a element with the class 'copy'");
});
$('p').on("click", function(){
console.log($(this).text() + ": you clicked on a <p> element'");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Something here</h3>
<p id="copythis" class="copy">Copy this code</p>
<h3>Something here</h3>
<p id="copythisone" class="copy">Copy this other text</p>
<h3>Something here</h3>
<p id="copythisone" class="copy">Copy this other text</p>
With JQuery, you can use .text() to get the contents of a p element. You could also change your selector to just grab the contents of all 'p' elements. The ID selector .(#copythis) will grab the element related to only that ID. The class selector (.copy) will attach to all elements with the class "copy."
This will help you isolate what's being clicked on. What you want to do with it - copy the contents to clipboard - might change the logic a bit depending on if you have control over the HTML source, and how your deciding what gets copied and doesn't.
I don't know what you are planning to do do, but basically this line
var text = $("#copythis").get(0);
is where the p-node will be selected from your dom an afterwards the content of this p-tag will be copied.
change it to
var text = $("#copythisone").get(0);
to copy the content of the 2nd p -tag
You could change the id of your third p-tag to sth. like copythisonetoo
var text = $("#copythisonetoo").get(0);
to get the content of the 3rd p tag.
But per definition an id should be unique in your document. Refer to this link:
https://www.w3schools.com/html/html_id.asp#:~:text=The%20id%20attribute%20specifies%20a,element%20with%20the%20specific%20id.
You could create a method with a parameter for the text to copy or an id.
With some additional info and your certain usecase we could probably help you most.

Select only the text inside div of sibling with class name, having many families of same class names

I wanted to copy the texts when the copy button is clicked. But, it copies the last(3rd) paragraph text when pressing any of the three buttons. It suppose to find previous sibling and copy that text when that particular button is clicked.
Here's my code. I think, I went wrong in the sibling thing. Let me know what I did wrong here:
//finding text to copy
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
$(this).closest('.phc-hashtags-box').find('.phc-hashtags-box-tags');
copy = copy +$(this).text();
});
});
function copyToClipboard(element) {
var $temp = $('<input>');
$('body').append($temp);
$temp.val($(element).text()).select();
document.execCommand('copy');
$temp.remove();
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog1</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #1st</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog2</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #2nd</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog3</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #3rd</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
</div>
</div>
</body>
</html>
Instead of picking by class which gets all of the element with that class, limit your find to the parent() div of the button and it will only get the relevant text:
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
$(this).parent().find('.phc-hashtags-box-tags'); // notice the change on this line.
copy = copy +$(this).text();
});
});
EDIT:
Working solution:
Now i noticed - you are not passing a single element to copyToClipboard.
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
is sending the saving to copy the last element from 3 found with this. Try instead:
<button onclick="copyToClipboard($(this).parent())" class="phc-hashtags-box-button">Copy</button>
I believe that when you pass '.phc-hashtags-box-tags' to the onclick attr of the button elements, it is matching all of the elements with that class and returning the last match for the value of your function.
Instead, try changing the button onclick handler to:
copyToClipboard($this)
That said, the execCommand function is not working in the provided snippet so verifying is difficult.
Perhaps try passing IDs or try to architect a more elegant solution. So many relative jQuery selectors will inevitably cause bugs as complexity grows.

How to remove the content from a "div" element using a button "onclick" function?

I have a div element that contains a number of images. When the user clicks a button, I want the contents of the div to be removed (not the div itself, I want to reuse the div to potentially add new content).
In my HTML, the div and button are defined as:
<body>
...
<div class="MyDiv"></div>
...
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
...
</body>
How do I write a function that removes all elements from this div?
You have to call removeChild:
function removeDivFunction() {
MyDiv.parentNode.removeChild(MyDiv);
}
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
David has already pointed you to an existing question/solution.
For reference consider reading: http://www.w3schools.com/js/js_htmldom_nodes.asp
Its always a good idea to assign id to the div.
Also if you are using jQuery you can delete element by $("#divid").remove() for reference see: https://api.jquery.com/remove/
I hope this helps.
function removeDivFunction() {
$(".MyDiv").remove();
}
<div class="MyDiv">I need to remove</div>
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
function removeDivFunction() {
var element = document.getElementsByClassName("MyDiv")[0];
element.parentNode.removeChild(element);
}
DEMO
You can try
Html
<div id="some">Example</div>
<button onclick="myFunction()">Click me</button>
javascript
function myFunction() {
var child = document.getElementById("some");
child.parentNode.removeChild(child);
}
And if you want to erase content of DIV then use
child.innerHTML = "";

zClip - Copy only visible text

Hey hopefully this is an easy solution:
On click of the button I want to be able to copy only the text that is visible within the id="description". what am I doing wrong?
HTML:
<p id="description"> Test <span style="display:none">test2</span></p>
<button type="button" id="copy-description">Click Me!</button>
jQuery:
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});
</script>
It needs to be in a parent tag like a p tag and then call the span visible within that tag.
HTML:
<p id="description">
<span id=""> Test </span>
<span style="display:none; visibility:hidden;">test2</span>
</p>
jQuery:
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('#description span:visible').text()
});

Wrapping tags around a cursor in a contenteditable div

So i have a contenteditable article tag
<article id="content" contenteditable="true">
<p class="default-text"> Write here </p>
</article>
I have this jquery to remove the p tag with class .default-text when article is clicked.
$(document).on('click', '#content', function() {
$('.default-text').remove();
});
//Here i want to wrap a new <p> </p> as the user starts typing.
Basically, I'm trying to replicate the placeholder text effect on input fields by removing the default text.
I also want the contents of what's written in the article tag to be wrapped around a p tag.
How do i go about this? Thanks.
This should work.
$(document).on('click keyup', '#content', function() {
if($('.default-text').remove()) {
if(this.children().length === 0 {
document.execCommand('formatBlock', false, 'p');
}
}
});
May this will solve your issue...............
HTML
<article id="content">
<p class="default-text" contenteditable="true"> Write here </p>
</article>
js
$(document).on('click', '.default-text', function() {
$('.default-text').text('');
$(this).removeClass('default-text');
});
The output is as per your requirement.

Categories

Resources