How to only select this textarea on click? - javascript

I need some help, I am stuck at this problem.
I have an api that I am calling, it brings in a list of information, I output the data into a textarea, on click I only want to select THIS textarea (not the others), and copy the content into my clipboard.
This is what I wrote:
function copyText() {
$(this).find('.api-text').select();
document.execCommand('copy');
}
But this is not working, when I replace this with '.api-text' and remove the find(), it selects ALL results with that class.
All the help is appreciated!
UPDATE:
Here is a jsFiddle with a rough example of what I am seeing.
https://jsfiddle.net/ax6na18u/

I found the solution after googling a suggestion from Rajesh on event.target or "(this)".
Rajesh's original code worked, just had to tie it in correctly in the HTML with $event.target:
<button class="btn btn-primary" (click)="copyText($event.target)">Copy to Clipboard</button>
The $event.target was the route of all evil!

As suspected, issue is in navigating to textarea.
First, your this is not pointing to button. Second, even if it was, you do not have an element with class api-txt in it.
You should try one of these approaches:
Go to nearest parent(li) that encapsulates both button and textarea and find textarea.
$(el).closest('li').find('.api-txt').select();
If the structure is going to remain like this where textarea and button will be on same level, you can search at this level.
$(el).siblings('.api-txt').select();
Sample
function copyText(el) {
//$(el).closest('li').find('.api-txt').select();
// or
$(el).siblings('.api-txt').select();
document.execCommand('copy');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
<textarea name="apiurl" class="api-txt">{{ result.latest }}</textarea>
<br>
<button class="btn btn-primary" onclick="copyText(this)">Copy to Clipboard</button>
</li>
</ul>

Related

javascript execute button click event

I am new to javascript. Please find the below code for button,
<p class="actions">
<button class="button primary" type="submit">Login</button>
Sign Up
</p>
I need code to click this button. Anyone please help me. Thanks in advance.
Can you provide the rest of your code including the script section so we can see what you have there?
Basically however, if you just need the button to register a click I would change the button Id to an element since it's a unique element. Let's call it id =button1 . Then in your script section you would type
document.getElementById("button1").onclick=function(){
}
And type what you want to happen inside the {}

Controlling the preventDefault to select which default to prevent

In a page I'm working on I have this HTML (simplified version; the original is a bit more complex).
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ></span>
<span class="type">numeric</span>
</a>
Then I have a system that allows an "edit mode".
That edit to mode changes that HTML to this:
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ><input name="aName" type="text"></span><img src="ok.png"><img src="x.png"></span>
<span class="type">numeric</span>
</a>
The issue is as follows:
When the user clicks the input how can I have the carret where the user clicked without anything else happening?
For that I tried this:
If I use the preventDefault(), the user is not sent to the link but the carret is also not positioned where the user clicked.
If I use stopPropagation(), nothing is prevented, the link is clicked.
If I use both, same as preventDefault() happens.
One possible solution I thought is to get rid of the <a> and replace it with a different tag, like a <span> tag. I just would prefer not to have to do that due to how this system works. If you think that there's a nice alternative, then please state it.
No examples or answers with libraries please
Edit: My relevant js code, as requested:
this.editableElement = document.createElement('input');
this.editableElement.type = "text";
this.editableElement.onclick = function (e){
e.preventDefault();
e.stopPropagation();
}.bind(this);
this.editableElement.name = this.parent.getAttribute('name');
this.editableElement.value = this.currentText;
Edit2: jsfiddle as requested.
http://jsfiddle.net/brunoais/gZU8C/
Now try to place the caret where you clicked. You'll check that the input becomes selected, the link is not followed but the caret is not placed where you clicked.

Hiding and Showing HTML Elements with Javascript doesn't work

I'm trying to hide and show HTML Elements by using javascript. It all works well, but the result isn't longer available then 1 Second. After one second, the element, that is displayed by default appears and the element that should be shown is hidden.
Here below I posted my sample code. I created an element called selected, that keeps a value, that tells which paragraph is actually shown. If I click on next, I want the next Paragraph to be shown.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<selected id="displayedResults" value="0">
</selected>
<div>
<p id="results_0" style=""> Result 0 </p>
<p id="results_1" style="display: none;"> Result 1 </p>
<p id="results_2" style="display: none;"> Result 2 </p>
<p id="results_3" style="display: none;"> Result 3 </p>
<p id="results_4" style="display: none;"> Result 4 </p>
<p id="results_5" style="display: none;"> Result 5 </p>
<a onclick="previousResults()" href="">Previous</a>
<a onclick="nextResults()" href="">Next</a>
</div>
<script type="text/javascript">
function previousResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index>0)
{
document.getElementById(rslString.concat(index)).style.display='none';
index=index-1;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
<script type="text/javascript">
function nextResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index<5)
{
document.getElementById(rslString.concat(index)).style.display='none';
index++;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
</body>
</html>
Your links are reloading the page when you click on them, so you're seeing the results of your JavaScript, then the page reloads and it resets back to the starting state. The simplest solution would be to modify your HTML for the <a> elements to this:
<a onclick="previousResults(); return false;" href="">Previous</a>
<a onclick="nextResults(); return false;" href="">Next</a>
The return false will prevent the default behaviour of that action - in this case following the link - thereby preventing the page reload.
In addition to that, there's no <selected> element in HTML. You'd be better served by using a hidden input, so replace this:
<selected id="displayedResults" value="0">
</selected>
with
<input type="hidden" id="displayedResults" value="0"/>
<selected id="displayedResults" value="0"></selected>
That ain't gonna work ;-)
- Edit: Oke, yes it can work but it's not valid HTML...
<select id="displayedResults">
<option value="0">zero</option>
</select>
It is because your page is reloading in each click. Change that anchor tag to another tag like span or something..
<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>
add
return false;
on each function
use jquery than traditional javascript
to hide result 1
$('#results_1').hide();
to unhide just use
$('#results_1').show();
please tell what you are trying to achieve. I think you are doing it in a complex way.
The page is reloaded once you click the previous and next link. So please do as follows :
<a onclick="previousResults()" href="javascript:">Previous</a>
<a onclick="nextResults()" href="javascript:">Next</a>
Add return false; in the onclick attributes, in order to prevent the browser refreshing the page.
See http://jsfiddle.net/xZSyz/

JS-Linking to an anchor inside the document in the onclick() event

I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.
If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?
You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.
Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor

Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?
Button currently looks like:
<button>Visit Page Now</button>
What I would prefer not to have:
<button>Visit Page Now</button>
The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.
Looking forward to hearing some options/opinions.
Inline Javascript:
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});
Here's a solution which will work even when JavaScript is disabled:
<form action="login.html">
<button type="submit">Login</button>
</form>
The trick is to surround the button with its own <form> tag.
I personally prefer the <button> tag, but you can do it with <input> as well:
<form action="login.html">
<input type="submit" value="Login"/>
</form>
Just do this
<button OnClick=" location.href='link.html' ">Visit Page Now</button>
Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.
LINKS ARE TRICKY
Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:
Ctrl+Click: opens link in new tabYou can simulate this by using a window.open() with no position/size argument
Shift+Click: opens link in new windowYou can simulate this by window.open() with size and/or position specified
Alt+Click: download targetPeople rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
EASY WAY OUT
Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.
Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,
#btn {
background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
display: block;
width: 128px;
height: 128px;
border: none;
outline: none;
}
You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.
Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.
(actually, forget the second solution - if you can't use a form, the submit button is out)
<form action="portfolio.html">
<button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>
I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)
Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/
<button id="x">test</button>
$('#x').click(function(){
location.href='http://cnn.com'
})
Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:
document.getElementById("Button").addEventListener("click", gotoUrl);
function gotoUrl() {
window.location.assign("https://www.google.com/");
}
Now the button will lead you to Google!
For more info: https://www.w3schools.com/js/js_window_location.asp
You can also try this<button type=“Submit”><a href=“”>#</a></button>

Categories