I have following html structure:
<div id="grandparent">
<div id="parent">
<p>
high light me with mouse!! highlight me with mouse!!highlight me with mouse!!
</p>
</div>
</div>
And I have this js code:
$(document).mouseup(function (event) {
var target=event.target;
target=$(target);
var parent = target.parent();
console.log(parent.parent().attr("id"));
if (window.getSelection) {
var selection = window.getSelection();
selectedText = selection.toString();
console.log(selectedText);
}
});
So this piece of code just console logs selected text.
But I have a problem - when I click not on my <p> element and just on document - and then I move mouse to select text holding left button I can't get the id of parent div because
var target=event.target;
target becomes document element
Change $(document).mouseup( for $("#parent").mouseup( .
Code:
$("#parent").mouseup(function (event) {
var target=event.target;
target=$(target);
var parent = target.parent();
console.log(parent.parent().attr("id"));
if (window.getSelection) {
var selection = window.getSelection();
selectedText = selection.toString();
console.log(selectedText);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grandparent">
<div id="parent">
<p>
high light me with mouse!! highlight me with mouse!!highlight me with mouse!!
</p>
</div>
</div>
Related
I am having a problem with the code below.
The code should handle the slider and changes between them when the img is
clicked, it works only once.
when I changed the onClick event to
document.getElementById("left").onclick = function(){
console.log("0");
}
It worked fine, but when I reverted, it doesn't change the slider more than once
snippet:
var index = 0;
document.getElementById("left").onclick = function(){
console.log("0");
}
document.getElementById("left").onclick = function(){
var slider = document.getElementsByClassName("slider");
slider[index].style.display = "none";
if(index == 0){ index = slider.length;}
slider[--index].style.display = "block";
}
document.getElementById("right").onclick = function(){
var slider = document.getElementsByClassName("slider");
slider[index].style.display = "none";
if(index >= slider.length){ index = 0;}
slider[++index].style.display = "block";
};
<div class="slider" style="display: block">
<div id = "left"><img src="Images/arrow-left.png" alt=""></div>
<div class="text">
<h2>welcome to the <span>classic</span></h2>
<p>Lorem ipsum is a name for a common type of placeholder text. Also known as filler or dummy text, this is simply copy that serves to fill a space</p>
</div>
<div id = "right"><img src="Images/arrow-right.png" alt=""></div>
</div>
thanks guys, the problem was that I gave multiple div the same ID which made the onclick event only fire once (with the first div only)
How to copy text from div element on mobile devices.
Here is a example:
<div class="banks" onclick="copyAccountNumber(this);">
<div>
<img src="../../../../images/bank/khaan_bank_32x32.png" alt="">
<!-- <input onclick="setTimeout(function() {this.setSelectionRange(0, 9999);}, 1);" value="5037 6391 20" readonly="true"> -->
<div class="js_account">5037 6391 20</div>
<span>Хаан банк</span>
</div>
<div>
<img src="../../../../images/bank/khas_bank_32x32.png" alt="">
<!-- <input onclick="this.setSelectionRange(0, 9999);" value="5002 0860 50" readonly="true"> -->
<div class="js_account">5002 0860 50</div>
<span>Хас банк</span>
</div>
</div>
And javascript:
window.copyAccountNumber = function(elem) {
let divs = elem.querySelectorAll(".js_account");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function(e) {
copyToClipboard(this);
});
}
};
function copyToClipboard(el) {
var oldContentEditable = el.contentEditable,
oldReadOnly = el.readOnly,
range = document.createRange();
el.contentEditable = true;
el.readOnly = false;
range.selectNodeContents(el);
var s = window.getSelection();
s.removeAllRanges();
s.addRange(range);
el.setSelectionRange(0, 9999);
el.contentEditable = oldContentEditable;
el.readOnly = oldReadOnly;
document.execCommand('copy');
}
But above not working anyways. I need to clipboard texts from .js_accountbut its not working well. What did i do wrong ? Any advice ?
You can take my code for example and change as per you requirement.. I have validated this code.. It is working fine.. Hope it's helpful for you..
Copying:------
<button onclick="myFunction()">
<div id="js_account">5037 6391 20</div>
</button>
<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
<script>
function myFunction() {
const el = document.createElement('input');
var copyText = document.getElementById("js_account");
el.value = copyText.innerText;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);
alert("Copied the text: " + copyText.innerText);
}
</script>
This code return false in Internet Explorer. Any alternative?
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDIV">
<p>I am a p element inside div, and I have a <span id="mySPAN">span</span> element inside of me.</p>
</div>
<p>I am a p element inside div, and I have a <span id="mySPAN">span</span> element inside</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var span = document.getElementById("mySPAN");
var text = span.childNodes[0];
var div = document.getElementById("myDIV").contains(text);
document.getElementById("demo").innerHTML = div;
}
</script>
</body>
</html>
I want to check whether the div element contains the selected range:
function getRange(root): Range {
const sel = window.getSelection();
const range = sel.getRangeAt(0);
if (range && range.commonAncestorContainer !== root && root.contains(range.commonAncestorContainer)) {
return range.cloneRange();
}
return null;
}
I want to check whether the div element contains the selected range:
Current behavior in internet explorer:
You don't need child Node.
Because the DOM contains check the full DOM not the Node Child. Please try this below function instead of yours. And it is working!
<script>
function myFunction() {
var span = document.getElementById("mySPAN");
var div = document.getElementById("myDIV").contains(span);
document.getElementById("demo").innerHTML = div;
}
</script>
DEMO: https://www.w3schools.com/code/tryit.asp?filename=FQFMFOKPLHO3
I am trying to code a HTML text box, with a button to COPY all the text contents of a particular div class.
The code does copy text, however, it copys text from the entire page (multiple posts on a forum) instead of the one post of interest. Is there a way to stop it doing this?
My code below so far,
Many Thanks for your help
<div class="main">
<div class="container">
<div class="codebox">
<div class="ipsCode_citation">
<div style="float:right">
<button onclick="copyText()">Copy</button>
</div>
Code:
</div>
<p> </p>
</div>
</div>
</div>
<p> </p>
<div id="output"></div>
<script>
function copyText(){
var outputText = "";
var targets = document.getElementsByClassName('codebox');
for (var i = 0; i < targets.length; i++) {
outputText += targets[i].innerText;
}
var output = document.getElementById('output');
output.innerText = outputText;
var range = document.createRange();
range.selectNodeContents(output);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
output.style.display = 'none';
}
</script>
In an attempt to apply Matt Webbs suggestion. Is this on the correct lines?
<div class="codebox">
<div>
<button class="codeBtn">Copy</button>
</div>
<p> </p> Some text to copy
</div>
<script>
var copyBtn = document.querySelector('.codeBtn');
copyBtn.addEventListener('click', function(event) {
var copyText = document.querySelector('.codebox');
copyText.select();
var successful = document.execCommand('copy');
});
</script>
Here is a sample of what you need, this will copy the contents within .codebox to the clip board.
HTML
<div>
<textarea class="codebox">function helloWorld() {}</textarea>
</div>
<div>
<button class="codeBtn">Copy</button>
</div>
JS
var copyBtn = document.querySelector('.codeBtn');
copyBtn.addEventListener('click', function(event) {
var copyText = document.querySelector('.codebox');
copyText.select();
var successful = document.execCommand('copy');
});
Sample:
JsFiddle
UPDATE
To get the text (or html) form the specific area where the button is, using the html you have provided, you can do something like this, notice I have used a hidden textarea so we can still utilise the document.execCommand('copy'):
HTML
<div class="codebox">
<div class="ipsCode_citation">
<div style="float:right">
<button class="codeBtn">Copy</button>
</div>
Code:
<textarea style="display:none" id="hidden-codebox"></textarea>
</div>
</div>
JAVASCRIPT
var copyBtn = document.querySelector('.codeBtn');
copyBtn.addEventListener('click', function(event) {
// copy element text:
var copyText = document
.querySelector('.codeBtn') // button
.parentElement // div
.parentElement // div.ipsCode_citation
.parentElement.innerText; // div.codebox
// push to HIDDEN textarea:
var hiddenCode = document.getElementById('hidden-codebox');
hiddenCode.value = copyText;
hiddenCode.select();
try {
var status = document.execCommand('copy');
if (!status) {
console.error("Cannot copy text");
} else {
console.log("The text is now on the clipboard");
}
} catch (err) {
console.log('Unable to copy.');
}
});
Sample:
JsFiddle
I have one div .content with two divs inside (.content-1, .content-2).
In the divs that are inside .content, I just want to have a maximum of two paragraphs.
So, when I click in the button "add" I want to add a paragrah inside a div that has only one or zero paragraph, if have 2 I want to create a new div .content-3 and add this paragraph in this third div, and when this third div has two paragraphs I want to create a new div .content-4, and so on..
Im trying to do this, and I already have working the part that I add a paragraph just when a div have 1 or zero paragraph. But now the part that creates a new div if the others already have two, is not working properly.
Do you see why its wrong?
I have here my example working: http://jsfiddle.net/e2f38kgL/1/
html:
<div class="message">
<input type="text" id="input" onclick="clear();" value="text:"><br>
<button id="import" class="btn">add</button>
</div>
<div class="content">
<div class="content-1">
<p>text 1</p>
<p>text 2</p>
</div>
<div class="content-2">
<p>text 1</p>
</div>
</div>
jquery:
$(document).on('click', '.btn', function(){
var input = $("#input").val();
var maxdivSize = 2;
var divContentSize = $(".content > *").length;
$(".content >*").each(function(){
var i = 0;
var numberOfElements = $(this).find("p").length;
if (numberOfElements < 2){
$(this).append("<p> "+ input + "</p>");
}
else{
$(".content").append("<div class='content-"+i+1+"'>"+input+"</div>");
}
i++;
});
});
Try to use this code,
$(document).on('click', '.btn', function () {
var input = $("#input").val();
var divContentSize = $(".content > *").length;
var relDiv = $(".content > div").filter(function () {
return $(this).children().length !== 2;
});
if (relDiv.length) {
relDiv.append("<p> " + input + "</p>");
} else {
$(".content").append("<div class='content-" + (divContentSize + 1) + "'><p>" + input + "</p></div>");
}
});
$(document).on('click', '#input', function () {
$('#input').val('');
});
DEMO