on my screen i am showing a few inputs like this.
<span>
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
all i want to do is when the user losses focus and does not click the check r times icon. an event should be triggered.
In simple words if the user presses anything other than these five elements i want to call an event. I have tried to apply (blur)="SomeMethod" to the span above, but it is useless. And applying it on input tag simply calls the event even if the i in the same group is clicked
use
<span tabindex=0></span>
to ger focus on your span and then you can call blur method.
so basically the blur event fires when the focus is lost. By default, a div or span element cannot have the focus in the first place so it can't be lost.
here if you set tabindex on a span, then it can gain the focus and you call your function on blur. this also works with tab key press event.
for more check this fiddle
it is done in core js, not on angular but you can use the same logic in angular refer, try this
document.body.addEventListener("click", function() {
var parents = [];
var p = event.target;
while (p !== document) {
var o = p;
if(o.className.indexOf("input-items") !== -1) break;
p = o.parentNode;
}
if(p === document) {
// your code here
console.log("here");
}
})
<body>
<span class="input-items">
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
</body>
Go for
(clickOutside)="something"
on span
check here
Related
I have the following code which adds divs within a container (#subtask_container) via clicking a link (similar to Google Tasks):
HTML:
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
JS (this successfully adds unique inputs within the subtask container div along with a clickable x after each input)
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted"></i><br>');
i++;
});
What logic do I need to add to the x class to remove it's associated input?
I've tried
$('.fa-times').click(function(){
$(this).prev('input').remove();
});
but it doesn't seem to work...
Thanks!
You can simply wrap your subtask append in a div and simply use .parent() and .remove() function on that. No need to use <br>
Also, do not use .fa-times as primary click event handler as you might have other fa-times on the same page as well Which might cause issues later on. Add a custom class to your fa item (.subtask_remove_icon)
Live Demo:
var i = 1
$("#add_subtask").click(function() {
$("#subtask_container").append('<div><input name="subtask' + i + '" class="mt-1" id="subtask' + i + '" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted subtask_remove_icon"></i></div>');
i++;
});
$(document).on('click', '.subtask_remove_icon', function() {
$(this).parent().remove(); //remove the input when X clicked
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
The event handler gets attached to all elements that are on the page load. Since the icons are appended, the right way to do this would be the following:
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<div><input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted removeIcon"></i><br></div>');
i++;
});
$(document).on('click', '.removeIcon', function(){
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
I am using the contentEditable attribute of Angular 6 for editing the content of the element (in the ngFor)
How I can set focus on a tag element when it's contentEditable attribute is true?
<div class="tag" *ngFor="let tag of tags">
<span [contentEditable]="underUpdateTagId==tag.id" [textContent]="tag.title
(input)="tag.title=$event.target.textContent">
</span>
<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag)">
<i class="fas fa-pencil-alt"></i>
</span>
<span *ngIf="underUpdateTagId==tag.id" class="update text-success" (click)="editTag(tag)">
<i class="fas fa-check save"></i>
</span>
<span class="delete text-danger" (click)="delete(tag)">
<i class="fas fa-trash-alt"></i>
</span>
</div>
The user interface:
We can use ViewChildren to get a hold of all the spans, by placing a template reference, pick up the span that is selected and set the focus to the element.
So I suggest adding template reference and in your beforeEdit() pass the index of the tag (we get it from ngFor), so we can refer to it when we want to place the focus on the field:
<!-- add template reference in below span tag --->
<span [contentEditable]="underUpdateTagId==tag.id" ... #spans>
<!-- pass index as from ngFor iteration to beforeEdit() -->
<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag, i)">
<!-- more code --->
In the component we refer to spans, the template reference. And when clicked upon specify that the span with the index passed should be focused:
#ViewChildren("spans") spans: QueryList<ElementRef>;
underUpdateTagId = null;
beforeEdit(tag, index) {
this.underUpdateTagId = tag.id;
// wait a tick
setTimeout(() => {
this.spans.toArray()[index].nativeElement.focus();
});
}
STACKBLITZ
PS, this sets the focus in the beginning, you might want it at the end, maybe this question can help you with it if that is the case: Use JavaScript to place cursor at end of text in text input element
I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
Thanks in advance
Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.
// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));
// Loop over the array
buttons.forEach(function(btn){
// Set up a click event handler
btn.addEventListener("click", function(evt){
// Print out some identifying information about the clicked element
console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
});
});
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.
HTML CODE
<div class="col-6">
<div class="js-list-item">
<h3 class="js-list-title"></h3>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<p>Date: <span class="js-date"></span></p>
<p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
</span></p>
</div>
</div>
javascript code
function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
console.log('test');
e.preventDefault();
deleteShow(
$(e.currentTarget).closest('.js-list-item').attr('id')
);
});
}
The second parameter of the .on() function is a selector.
http://api.jquery.com/on/
Change:
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
to:
$('.js-list-item').on('click', '.fa-trash-o', function(e) {
('click', 'fa-trash-o', function(e)
fa-trash-o is not a proper selector, use class or id
I am trying to access a button in my leaflet map. The button is created using a plugin "easy-button".
My main goal is to see if the button has been clicked (is active), I will use it for validation in another function, not shown here.
This is how the html for the button looks like in the browser debugger (I believe the html is created by the plugin?).
Before it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg"></span>
</span>
</button>
After it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo"></span>
</span>
</button>
This click function access the button and show 'Button was clicked' but the if statement does not pass. I got to the button using Copy CSS path in the browser, but it seem really long.
$("div.leaflet-bar.easy-button-container.leaflet-control > button > span").click(function(){
alert("Button was clicked");
if
($('span').hasClass('fa fa-crosshair fa-lg'))
{
alert('My button has active class')
}
});
Any advice on what I am doing wrong?
This
if($('span').hasClass('fa fa-crosshair fa-lg'))
Will not target the span you are expecting it to.
You wanted
if($('span',this).hasClass('fa fa-crosshair fa-lg'))
To target the child span of the span you clicked on
Run this example, hope it helps:
$(document).ready(function() {
// My example to trigger the click on buttons..
$("button > span > span").click(function(){
alert("Button was clicked");
if (
//$(this).hasClass('fa') && <-- You don't need it, both have it
$(this).hasClass('fa-crosshairs') &&
$(this).hasClass('fa-lg')
) {
alert('My button has active class');
} else {
alert('Ops..');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Unclicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg">click me</span>
</span>
</button>
<!-- Clicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo">clicked</span>
</span>
</button>