using element ui component el-pagination i am trying to add the code to detect the enter and space for the pagination
but here
addKeyEvent() {
document.querySelectorAll('ul.el-pager li.number').forEach((element, index) => {
element.addEventListener('keyup', function (e) {
if (e.key == 'Enter' || e.key == 'Space') {
console.log(e.key);
console.log(element.innerHTML);
console.log(this.$parent);
this.$parent.handleCurrentChange(element.innerHTML);
}
})
});
}
i am unable to call the method, if i just console this, all i i get is the li element on which the pagination is linked. how can i call the method to pass pagination and make it work
also i am calling this function on the watch which this.addKeyEvent();
Related
I am recently learning electron I have encountered a problem that I want to listen ESC in both process,
In Main process,
menu.append(new MenuItem({
label: "Hide on Escape",
visible: false,
accelerator: "Escape",
click: (item, window, event) => {
if (window.isVisible()) {
window.hide();
}
}
}))
In Render Process,
// on Key press Handler
const onKeyDownHandler = (event: React.KeyboardEvent) => {
if (isContentEditable && event.key === "Enter") {
applyContentEditable();
} else if (event.key === "Enter") {
onSelected && onSelected(pair);
} else if (event.key === "Delete") {
onDelete && onDelete(pair);
} else if (event.key === "F2") {
setIsContentEditable(true);
} else if (event.key === "Escape") {
resetContentEditable(); // Stop Renaming and get back to default
}
}
But this didn't work the window hides before the render process. How can I Stop hide when it is listened by Render Process
There is an event.stopPropagation() method which prevents further propagation/calls on the same event Docs
And there is event.preventDefault() which can be used to stop default handling Docs
I still don't quite fully understand your setup and what you are try to achieve.
Another solution is to stop listening on the escape key in the main process at all. Only listen in the render process and then pass the event manually to the main process in case you want to take some action there as well (or the other way around, depending on what makes more sense for you).
For this passing you are probably looking at the electron ipcMain module https://www.electronjs.org/docs/latest/api/ipc-main
Morning peeps,
I am trying to focus a search input in my application when someone presses CTRL+F or CMD+F instead of triggering the browser's search, and I would like to ask if that's even possible. An implementation that I found online but doesn't work obviously is this:
window.addEventListener('keydown', function (e) {
if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
if (document.getElementsById('search').not(':focus')) {
e.preventDefault();
console.log('Search is not in focus');
document.getElementsById('search').focus();
} else {
console.log('Default action of CtrlF');
return true;
}
}
});
I have also tried to use the useRef() from React in order to reach the input and focus it afterwards, but couldn't make it work. Any hints, ideas, code snippets that could help me?
change getElementsById to getElementById
use document.activeElement to check current focus element (much better approach)
Try this:
window.addEventListener('keydown', function (e) {
if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
if (document.getElementById('search') !== document.activeElement) {
e.preventDefault();
console.log('Search is not in focus');
document.getElementById('search').focus();
} else {
console.log('Default action of CtrlF');
return true;
}
}
});
I'm trying to make a tooltip using JavaScript. Part of my script has function for debugging purposes:
function fnTooltip(e) {
if (e.type === "mouseout") {
console.log(...);
if ((e.fromElement === "td") && (e.toElement !== "td")) {
debugger;
console.log(...);
}
}
}
When i move mouse out from td cell, nothing happens. If i write to console "e.fromElement" and "e.toElement", they both are equal "[object HTMLTableCellElement]". In another part of my script using almost the same function but with event type "mouseover", everything works fine. So what am i doing wrong? How do i check e.fromElelement and e.toElement.
I also tried relatedTarget, target, srcTarget with same result.
I'm trying to turn a button-click into a toggle that enables or disables a function, depending on its state. The function allows the enter key to be used for a form submission.
var enterToggle = true;
function enterToggleListener(elem) {
enterKeyPress();
elem.click(function() {
enterToggle = !enterToggle;
console.log('enter-toggle clicked')
if (enterToggle === false) {
console.log('enter toggle false')
// What do I need to add here to stop 'enterKeyPress()'?
} else {
console.log('enter toggle true')
enterKeyPress();
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(e.which == 13){
$('#noteButton').click();
}
});
}
enterToggleListener($('#toggle-button'));
What I don't understand is how to stop the enterKeyPress() function when enterToggle is false. Any suggestions?
EDIT: Cleaned-up code, with #James Montagne's answer added
var enterToggle = true;
function enterToggleListener(elem) {
elem.click(function() {
enterToggle = !enterToggle;
if (enterToggle === false) {
$('#enter-toggle').text('Enter key saves note (OFF)')
} else {
$('#enter-toggle').text('Enter key saves note (ON)')
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
enterKeyPress();
enterToggleListener($('#enter-toggle'));
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
You can simply check the value of the variable within your handler. This way you don't need to keep adding and removing the handler as seems to be your current approach.
However, if you must add and remove for some reason, you would use off.
I wrote the following jquery code to allow only numbers in a textbox.
$("[id$='txtPriority']").keydown(function (event) {
if (event.keyCode == 48) {
var value = $("[id$='txtPriority']").val();
if (value == "") {
event.preventDefault();
return;
}
}
else if (event.keyCode == 86 || event.keyCode == 118) {
event.preventDefault();
return;
}
else {
$("[id$='txtPriority']").numeric();
}
});
});
This works fine ,when the page is loaded for first time.But after post back the code is not working.What might be the reason.
I you are changing something with ajax then the event will not work.
Try using the live function ( http://api.jquery.com/live/ )
$("[id$='txtPriority']").live('keydown', function (event) {
I had this problem once and it was because I was replacing the html for the form in the postback. You need to reset your event handlers after replacing the controls or use the .live() handler which will work even for elements you add later:
$("[id$='txtPriority']").live('keydown', function (event ) {