I'm trying to detect when a user presses return/enter in a chat box to send the message. How do I detect this for a paper-input element?
paper-input inherits from core-input, which fires a change event when the users hits enter/return or the element loses focus. If you don't care about the losing focus case (e.g only want the case where the user hits ENTER), you could check the document.activeElement:
document.querySelector('paper-input').addEventListener('change', function(e) {
if (document.activeElement == this) {
console.log('ENTER hit on aper-input');
}
});
http://jsbin.com/godaqugacecu/1/edit
See http://www.polymer-project.org/docs/elements/core-elements.html#core-input.
Related
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.
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
}
}
I'm using bootbox.js along with yii2 framework to change the default confirmation popup on delete actions.
When I hit the "delete" buttons the bootbox popup appear properly but the "ok" button is preselected, so if the user hit the "enter" button the action take place.
Is it possible to change the default selected button from "ok" to "cancel"?
Thank you
There isn't anything baked into the library to do what you want, but something like this should work:
var dialog = bootbox.confirm("Please confirm action", function(result){
/* handle result */
});
dialog.on("shown.bs.modal", function() {
dialog.find('.modal-footer .btn.btn-default').focus();
});
Normally, forms and pop Ups don't have the focus set when they are just displayed. The obvious solution was to set the focus to the first input in the creation complete event of the component, so the keyboard short Cuts like tab and space start working.
The problem is that, creation complete is not the panacea, sometimes the element is not focus-able at that point, and i am not sure why that happens.
The render event would ensure the focus, but it dispatches too much for a very simple purpose.
In which point a component is always ready to be focus-able?
Edit: The component giving me trouble to get start up focus, is a TitleWindow, which can be poped in 2 ways, a Mouse click event and a keyboard event.
When the tite window is displayed by a click, the first input gets focus in the creation complete event, but when displayed by a keyboard event, it doesnt...
By now i got it working with the following code:
private function titlewindow_creationCompleteHandler(e:FlexEvent):void{
callLater( setTextInputFocus);
}
private function setTextInputFocus():void{
txtPregunta.setFocus();
}
But doubt the way is shown has anything to do with this... because, some other TitleWindow are displayed this way too and they're fine.
So what could it be?
The render event would ensure the focus, but it dispatches too much for a very simple purpose.
If this is true then why not try this:
private function titlewindow_creationCompleteHandler(e:FlexEvent):void{
var callback : Function = function(re : Event) : void {
titlewindow.removeEventHandler(RenderEvent.orsomething, callback);
setTextInputFocus();
};
titlewindow.addEventHandler(RenderEvent.orsomething, callback);
}
Might be kind of a hack since it should be focusable on creationComplete but it would probably work.
I have 'Back Board' on my images and content over here: http://syndex.me
So basically, you click on an image, it will overlay a info panel above the clicked content.
I want to do two things:
Click on the background of the site to fade out the currently opened info panel
Be able to click on a tag, link, or social icon within the info panel without triggering it's parent function, which is too fade out again.
I cannot use stopPropagation for the child click being superseded by the parent click as i need the click events to be handled by .live() (see documentation) This is due to the fact that posts are being dynamically loaded.
I cannot just say something like:
$("#Background").click(function(){//fade out the Info Board}
Because that is being covered by the entire post wrapper, and i can't put an event ont hat because then I'm even deeper in the dilemma of parents taking over children's events :-)
So far I'm at least able to have just one infoboard open (i.e I click on one image, then another, it will close the already opened one, and open the current one. So this part is all good:
$('.theContent:not(.clicked)').live("click", function () {
$(this).children('.postInfo').fadeIn(400);
$(".clicked").each(function() {
$(this).find('.postInfo').fadeOut(400);
$(this).removeClass('clicked');
});
$(this).addClass("clicked");
});
$('.clicked').live("click", function () {
$(".clicked").each(function() {
$(this).find('.postInfo').fadeOut(400);
$(this).removeClass('clicked');
});
});
Re .live(), .delegate() and .stopPropogation():
Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.
How about simply checking whether the event actually took place on the specific element:
function activate(el) {
el.find('.postInfo').fadeIn(400);
el.addClass('clicked');
}
function deactivate(el) {
el.find('.postInfo').fadeOut(400);
el.removeClass('clicked');
}
$('.theContent:not(.clicked)').live('click', function(e) {
deactivate($('.clicked'));
activate($(this));
});
$('.clicked').live("click", function(e) {
if (! $(e.target).is('a')) {
// this should not trigger if a click occured on one of the links
deactivate($(this));
}
});
$('#ape').click(function(e) {
if ($(e.target).is('#ape')) {
deactivate($('.clicked'));
}
});
Have you thought about binding the click event when the post is dynamically loaded? This way you can use stopPropagation().
http://jsfiddle.net/rkw79/CzEj5/
If you bind the event to a parent element, it won't stop its propagation event to it's childrens.
You have two solutions, to bind an event to every children and put THERE the stop propagation call, or just test who ired the click event in the parent. I prsonaly find more elegant the second solution.
You can read something more about it here :
http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html