Here is a working example of code in my dev org:
Prerequisite:
- I downloaded sweetalert library(zip file) from their site and uploaded as static resource in my dev org with name as
sweetalert2
.
HelloWorldApp.app
<aura:application extends="force:slds" controller="HelloWorldApexController">
<ltng:require scripts="/resource/sweetalert2/sweetalert2.js"
styles="/resource/sweetalert2/sweetalert2.css"
afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<button aura:id="delete-btn"
type="button"
onclick="{!c.deleteRec}"
class="slds-hide">Delete</button>
</aura:application>
HelloWorldAppController.js:
({
afterScriptsLoaded: function(component,event,helper){
var btnElem = component.find("delete-btn");
console.log(btnElem);
// Because click of the delete button will show sweetalert..we should display the delete button only if
// resources are loaded.
$A.util.removeClass(btnElem,"slds-hide");
// Add the slds classes to button to display.
$A.util.addClass(btnElem,"slds-button");
$A.util.addClass(btnElem,"slds-button--brand");
},
deleteRec: function(component,event,helper){
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (){
// This block of code gets executed if user chooses ok for deleting record.
console.log("User chose to delete the record");
// Here you can call the helper function.
});
}
})
Output:
https://imgur.com/a/DQDY9
EDIT:
To retrieve attribute of the button in controller code, make the below changes:
Component markup:
<button aura:id="delete-btn"
type="button"
onclick="{!c.deleteRec}"
data-recId="yyyyyy"
class="slds-hide">Delete</button>
Controller code:
deleteRec: function(component,event,helper){
var idVar = event.target.dataset.recid; // get recId attribute
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (){
console.log('Record id is '+ idVar); //Printing from success function
// This block of code gets executed if user chooses ok for deleting record.
console.log("User chose to delete the record");
// Here you can call the helper function.
});
}
I think if you can store the input component using an onfocus
event, you can then capture a keyboard event by either:
either attaching a listener to the window
or wrapping everything in a span or div with a onkeyup
event.
Markup:
<span onkeyup="{!c.handleKeyup}">
<lightning:input label="Name" name="myname" onfocus="{!c.handleFocus}"/>
</span>
Controller:
handleFocus: function(component, event, helper) {
var src = event.getSource();
component.set("v.currentInput",src);
},
handleKeyup: function(component, event, helper) {
//you have the relevant input + the keyboard event
var currentInput = component.get("v.currentInput");
if(event.key == 'Enter') {
console.log(event);
//do something
}
}
EDIT
Forgot to say, to add your focus handler to the dynamically created component, use component.getReference()
to get a ref to the method. Eg in your component creation call, do something like this:
"lightning:input",
{
"aura:id": "findableAuraId",
"onfocus": component.getReference("c.handleFocus"),
"label": "your label",
"name": "your name"
},
In the handleKeyup
method, you can then do whatever processing you need as you have both the keyboard event and the relevant component.
Best Answer
You can get the keyCode from the event object .Below is what I tried and worked
You can also use which as well .Below is the console.log of whole event object