I want to add a javascript function to change the link that has been copied by a user. With right-click > Copy link. I searched around, I tried adding an onclick event but nothing. I searched for something with document.addEventListener but nothing. Please give me help.
The thing thatI understand is that you want to change a link when it is copied to different on
<!DOCTYPE html>
<html>
<body>
Link1 is here
<script>
function myFunction() {
document.getElementById("demo").href = "https://stackoverflow.com";
document.getElementById("demo").innerHTML = "Link1 changed to Link2"
}
</script>
</body>
</html>
If you want the copied link to change then it is not possible : Instead you can replace the link with your choice before the copy that is initial link of your choice
The oncopy event occurs when the user copies the content of an element.
Tip : The oncopy event also occurs when the user copies an element, for example, an image, created with the element.
Tip : The oncopy event is mostly used on elements with type="text" but can be applied to other elements also.
Related
I am trying to check if a user clicked on a kind of a href in a specific class.
I am appending the class in jquery because I need to put a different link every time
$("#list-dir").append("<a href='' class='add-href'><il class='dir-items'> " + dir_items[i] + " <br> </il></a>")
$(".add-href").eq(i).attr("href", href_element);
and it works as it should I can see the class and the correct link in the HTML file. But when I try to check if the user clicks it nothing works for some reason like the class isn't there
This ^ was how the webpage looks after I modified it with JQuery.
I already tried putting this code:
$(document).ready(function(){
$(".add-href").on("click", function(e){
console.log("d")
});
});
as most of the answers suggest but it didn't work.
Thanks to CBore for giving me the answer. I had to use event delegation. after I did it worked perfectly fine. in addition like Aslan Kayardi said I could of also create another element like the data-href and enter the link in the value
I have spent a couple of days looking at examples of this. I believe I am either missing something or simply misusing it. I created my own version with slight modifications but it isn't working for me. I believe it is Javascript not jQuery but I do have other functions in the site with jQuery so I kept this in the header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Below this, I have the following script. I have seen a lot of examples using input containers but I need a simple click function to copy text that is not visible but in the element as a value. I want to be able to let the user click a "SPAN12" button and the elements needed to create a span12 for layout should copy to the clipboard. Then the user can paste the div element with a span12 class into the textarea. I guess another option is to let the code add it directly to the textarea with a click of the button labeled span12 but if not, then at least copying to clipboard is a great start. I just don't want to have the text show and I don't want it to be in the input to copy from, just a button. I have seen lots of examples with the 2 just mentioned but none in the way I am picturing.
<script type="text/javascript">
$(document).ready(function(){
$("#toCopy").on('click', function(){
document.getElementById("toCopy").addEventListener("copy", myFunction);
});
});
function myFunction() {
document.getElementById("copied").innerHTML = "You copied text!"
}
</script>
The element I am trying to manipulate is as follows.
<button type="text" id="toCopy" onclick="myFunction()" value="<div class='span12'></div>">Span 12</button>
<p id="copied"></p>
So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?
The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.
The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.
You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps
I'm new programming with JavaScript, I'm making and app to Loggin automatically in the Web of my University and get some data.
In JavaScript for change a value or make and action I first need to find the element in the HTTP code with:
document.getElementsByName or
document.getElementById
But if I have this piece of HTML code with no Id or name:
ALUMNOS
How can I get the href, or click them, or click the item that contains it?
You can refer to the element with document.querySelector("a[target='Menu']"). Works since Android 2.3.
<!DOCTYPE html>
<html>
<body>
<a onclick="myFunction()" href="/wal/gupmenug.menu?p_sistema_c=ALUMNOS&p_sistemaid_n=3&p_menupredid_n=3&p_pidm_n=617047&p_majr_c=617047" target="Menu">ALUMNOS</a>
<script>
function myFunction() {
var list = document.getElementsByTagName("a");
alert(list[0].href);
return false;
}
</script>
</body>
</html>
You need to search for the anchor tag in the body of page. This is done using below code:
$('body').find('a')
But the only issue is, there can be multiple anchor tags on the page. In order to pick your anchor tag of interest, you can compare the target attribute which has a value "Menu" in your case. Below is the code for that:
$('a[target="Menu"]').click();
I need to change the text that appears in the status bar of Chrome. Since it's not possible to use status.text anymore (for security reasons) I am wrapping an <a> tag over <body> so my code is <body>...</body> .
It's working as expected cause every time the user moves the mouse inside the page the status bar shows exactly what is inside the href attr of <a>. The problem: I did not realize till now that I cannot select any text inside the page cause if it's treated as link. I am using return false onclick event of and it works great cause the user is never redirected however it's not possile to select text inside the <a>.
Is there a CSS property that allows me to change that behaviour? It only occurs if <a> tag.
For the sake of hacking. This is invalid markup and bad code, but as a proof of concept (at least for Chrome).
One could use various combinations of mouse events, range selection and editable. Tricky part is to calculate what and where to select.
Sample code should give you selection of the first words in a paragraph; as in: click on the start of each paragraph like somewhere in "Lorem ipsum" or "Duis posuere" to select some of the words. This could then be combined with mousedown, mousemove, mosueup etc. to select correct text.
Chrome only Fiddle
You can try the CSS property pointer-events.
a{pointer-events:none} would disable the mouse event for that element.
But a better approach would be to add the URL in data-attribute and on click event you can navigate to those URL with location.href.
Will that help?
Ok, just for fun, and this is not the real hack but it something close:
Do like this:
<body>
<div class=container>bla bla bla</div>
<a href="my custom text" id=the_hack></a>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(".container").hover(function(e){
$("#the_hack").trigger("focus");
});
</script>
Of course it will have some limitations, when you select text the status bar will disappear, also if you highlight text move the mouse out of the div than back in, the selection will be lost, but hey it's a hack.
See here what I mean.