Using Polymer 2 and paper-dialog I have created message boxes for my application. For the usual information boxes with only an OK button I would like the enter key to trigger the same handler as the button does. Any idea how to accomplish this?
Note that I also implemented an InputBox and there I used the on-keydown event of the single input element. But for an information box there is no text input element - only static text and an OK button.
You could use a keydown-handler on the paper-dialog itself, and have that handler trigger the button's click-handler:
<paper-dialog on-keydown="_onDialogKeyDown">
<button id="myButton" on-click="_submit">OK</button>
</paper-dialog>
// in Polymer element
_onDialogKeyDown(e) {
if (e.keyCode === 13) {
this.$.myButton.click();
}
}
demo
Related
Sample HTML Code:
<div class="first-div" (click)="onClickCustomCard(d)">
Some text..
Images...
<input type="checkbox">
</div>
so my problem is that when i try to click the "input type checkbox" it also trigger the onCLickCustomCard(). Is there a way to not auto trigger the onC;ickCustomCard() when i click the input?
Thanks for helping guys...
You do this by stopping the propagation of events when you click on the input element.
Events can bubble up in the dom tree, meaning that every parent element also receives the event, in your case the click event.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Edit, some notes that are not directly related to your question: It's not good practice to add click events to divs, because this doesn't make them focusable via keyboard. So you can only click them with your mouse but not tab to them and click them with space or return key. If you use a button or link this behaviour is already implemented for you.
function onClickCustomCard() {
console.log('clicked Card')
}
document.querySelector('.first-div input').addEventListener('click', function(e) {
e.stopPropagation();
});
<div class="first-div" onclick="onClickCustomCard()">
Some text..
Images...
<input type="checkbox">
</div>
I have a focus trap that activates when an angular material dialog is opened. A parent component contains the cdkTrapFocus directive from the a11yModule (https://material.angular.io/cdk/a11y/api#CdkTrapFocus), and it's various children can have a varying number of inputs.
The focus trap works as expected when the dialog is opened, preventing the user from pressing tab or shift-tab to access items behind the dialog. However, when a user clicks on the grayed-out area behind the dialog, then presses shift-tab, they gain access to all items behind the dialog.
The focus trap remains broken until they press shift-tab (or tab) enough times to move the focus back inside the dialog. The correct behavior would be that the focus only ever stays trapped in the dialog, no matter what is clicked on inside or outside the dialog.
For the most part I have examined the link above to see what options there are to ensure focus remains trapped, but It has been difficult to determine what directives would be most useful for this problem. Below is the parent component html template.
<div class="dialog-frame dialog-fade dialog-backgray" [ngClass]="{ 'in': shown }" role="dialog">
<div class="dialog-main" [style.width]="dialogWidth" id="dialog-main" cdkTrapFocus>
<ng-template #element> </ng-template>
</div>
</div>
If anyone reading this has a solution to this, I would appreciate your help.
I ran into the shift-tab issue. The solution for me was to add a keydown listener, which prevents focus if the event path is not in the modal:
#HostListener('document:keydown', ['$event'])
onTab(event) {
if (event.key == 'Tab' && this.modalIsOpen) {
let path = event.composedPath();
let modal = path.find((element) => element.tagName && element.tagName.toLowerCase() == this.modalComponentTagName);
if (path && !modal) {
// Tabbing outside of the modal.
event.preventDefault();
this.focusOnFirstElementInModal();
}
}
}
For me this.modalIsOpen is this.document.body.classList.contains('modal-open'), this.modalComponentTagName is 'app-donate-modal', and this.focusOnFirstElementInModal() focuses on the modal's close button.
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
I have a primefaces p:treeTable, inside that I define a column includes 2 components: span tag and h:outputText tag. Currently, if I click on one of these elements, select event of table is triggered. But my purpose is that the select event will be fired only if I click of the text (and not for the span element). How can I do that?
You can prevent the event from bubbling up the DOM, by using JQuery's event.stopPropagation() function.
<span id="someId" onclick="if(event.stopPropagation) event.stopPropagation();">...</span>
JQuery API - event.stopPropagation
I have a question about making input fields required before being able to click a input button (not submit button). My code below only will send out the requirement notice after a submit button is click.
I have my form split into 3 div's with 'next' buttons in between which conditionally displays the next div. How do I make the input field to be required before the 'next' button brings up the next div portion of my form?
You should post the html for your question. It is missing. That being said, look into the blur event that gets trigger everytime an input loses focus. You could add the logic to display an error to the user and disable the next button.
http://www.w3schools.com/jquery/event_blur.asp
You have two main options:
FIRST OPTION
You could disable your button like so: <input id="but" type="button" disabled>, and then, you could set your field onchange method to enable the button i. e. <input type="text" onchange="changed();"> and in your script,
function changed(){
if(1 == 1){ // custom test
document.getElementById("but").disabled = false;
}
}
SECOND OPTION
In your button handler, verify your textfield is filled i. e.
function butHandler(){
if(document.getElementById("textfield").value !== "") {
// do your actions
}
}