I'm making a calculator app for class and I have run into a snag while implementing keyboard listeners. Everything on the keyboard side works properly, but I have found that when I am forced to physically click on a button, such as the more obscure functions which don't have keyboard keys, the button is staying focused. This normally wouldn't be an issue, except that every time I press the 'enter' key to solve the inputted function, the calculator thinks I'm pressing that focused button.
CSS hasn't worked and I can't find anything on Google for how to deactivate this. If it matters, I am using Bootstrap 3 for this. We haven't covered JQuery yet, so I'm hoping for a pure JS way to solve this if it's possible.
Thanks!
Thank you all for the responses. I tried both and my issue was solved, however it took either an extra function or an extra listener. I ended up finding the blur() function and calling it at the end of my switch statement which controls clicks accomplished what I wanted. Thank you again though!
After each mouse click, change the focus back to the equals or solve button, using the focus() method. That way when the user does eventually press enter, your code will think they're clicking the solve button
You can use an event handler like bind -> keypress just for Enter key.
$(document).ready(function(){
$(document).bind('keypress',pressed);
});
function pressed(e){
if(e.keyCode === 13){
//Call your result function here
}
}
Related
I have a form that I create within a Bootbox (itself a layer on top of Bootstrap's modal). Once it is created, I call
$('#myForm').validate()
on it.
The desirable part of the behaviour is that now as the user tabs through the forms, they can see immediate feedback that they've messed up one of the fields. Entered a non-email address before hitting "tab" or clicking elsewhere? Warning and error message. Great!
But the undesirable thing is that the blur eats other events. So, if a user instead chooses to hit "cancel" (knowing full well that the form is invalid), the click on the cancel is not heard and its handler will not fire. A second click (now that the focus is off the form altogether) and cancel fires as expected. I don't want the users to have to click twice.
I saw a technique for disabling the blur altogether, but then the desirable behaviour described above is then lost, which I do not want either. Ideally, a "well, I blurred, but I also know what the user was clicking" is what I'm after.
[EDIT TO ADD:]
It has come to my attention that this is confusing, so let me try a different approach to the question: is it possible to be working on a form (that has had .validate() called on it), then click on any other clickable item on the whole page and have its click handler successfully fire?
[EDIT AGAIN:]
Based on Sparky's demo, I wired up a warning to show below the inputs on blur. So, to see the problem in action, fire up this fiddle: https://jsfiddle.net/bd1fhpu3/
Then click into one of the input fields BEFORE clicking "just a button". Click in an upper sliver of "just a button" to make sure that the warning labels have pushed it out of the cursor's hotspot on release of the mouse button.
Anyhow, this just explains what the problem is. Solving it is probably not within the scope of the question anymore, but it seemed worth sharing in case anybody else comes across this. To solve, I will either need to override Bootbox's click event to be a mousedown event instead of a click (then you don't need to press and release), or I can "Band-Aid"(tm) the solution by avoiding relocating the button. Maybe a static-height dialog that's tall enough to accomodate the form and any possible warnings. Definitely somewhat of a "hack" like this because you just never know if you're going to do other things later that make the problem appear again. But it'd be a quick and easy temp fix.
You cannot use the built in onfocuout function since the JavaScript cannot possibly know the different between focusing out to another field and focusing out to the cancel button.
You'll have to completely disable onfocusout and write some custom event handlers.
Your code is sparse, so my answer will be very generic.
$('#myForm').validate({
// other options here
onfocusout: false; // disable default blur event
});
Then write an event handler that programmatically triggers validation on the form when they focus to an input, and will do nothing when they focus over to anything, like a cancel button.
$('#myForm input').on('focus', function() {
$('#myForm').valid(); // trigger validation on the form
});
However, this will trigger validation on the entire form. If you only want to trigger validation on the one field losing focus, then you're back to square one, because the event only knows focus was lost, not where it's going.
Just for posterity, here's an "answer" such as it is. Maybe it will help somebody SOME day; you just never know.
There is no code that is operating "incorrectly" and therefore there is not really a fix nor code sample to provide. Here's what was happening:
User is in focus in field
User presses mouse button down (but the release action hasn't happened yet)
Blur event fires, which causes form error warnings to appear below the fields. This also had the net effect of pushing the "cancel" button down the Y axis of the screen
User releases the mouse button, which would normally complete the "click" handler.
HOWEVER, in #4, since the "cancel" button is no longer under the cursor, the click event listener bound to the button does not fire.
The demo, for as long as it lives on the internet, will be in a comment below. However, providing a code sample to go with it is pointless. When the demo dies, I will remove the comment.
Possible Steps (workarounds/hacks) that I elected NOT to pursue thus far:
Modify the dialog such that the button does not move when mousedown event fires, meaning the "click" event is completed successfully
Provide custom code that substitutes the mousedown event for the click event on the button. However, this causes a loss of fairly common UI convention
Force user to press ESC to cancel, rather than clicking a button
[credit to Tieson T. via comment] One possible option, if you can use some custom styles on the error messages, is to hide them with visibility: none rather than display: none. The former would hide the text but still reserve the vertical space of the text, which the latter doesn't (hence why your modal is expanding). This would keep the button from possibly shifting during the focusout event. You would wind up with extra whitespace, but you could knock some of that off by removing the bottom margin on the form-group (assuming you're using it)
I'm sure there are other workarounds, but that's a starting point.
I'm using jQuery Mobile to develop one single page to use in Android Webview.
There is an button which I need put some pressed effect, and then I use vmousedown to add press style class and vmouseup to remove the class added before. However, there are something interrupt the vmouseup process.
Reproduce:
First, press one button, and it trigger the vmousedown event.
Then, keep hold your finger and move outside the trigger area.
Finally, loosen your finger and you will see it keeps the state that you hold it.
I have done a demo to test, and find that it even won't trigger vmouseout or vmousecancel, the last event have been triggered is vmousedown.
Is there anyone know why this happen and how to solve this?
This is code : Fiddle
When I written an example to test gesture event, I noticed that, the taphold event will be triggered and then I put it in on method and this problem fixed.
I am working on a custom application for the iPad that runs as a homescreen app, but is made in all CSS/HTML/Javascript. (not using the SDK here)
I have run into an issue with a calculator I have built into my page not hiding the keyboard. No matter what I do, the keyboard stays up. I have searched this extensively and tried everything I can think of, but the keyboard stays up no matter what I do.
Explanation of what I have tried to hide the keyboard:
I have tried to blur all input fields to remove focus. I have tried setting focus onto non-text field items.
There were several threads on Stackoverflow from earlier this year/last year that suggested both of those options, but they do not appear to be working anymore.
To test further, I put a blank a href="#" on an img that was above the calculator, so that I could set focus on a non-entry and see if that would auto-minimize the keyboard. When I tap that item above the keyboard the focus changes and I am no longer in input mode, but the keyboard stays up.
Did Apple break this functionality with the latest update? If so, is there a work around?
Here is some example code that doesn't work:
$('input').blur(function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
That code successfully removes focus from the inputs, but the keyboard stays up. I have also attempted the inverse of that by just .focus ing on a non-text element. And additionally, as stated previously, I have straight-up just added a non-text element on the page and that still doesn't hide the keyboard.
Thanks so much for any help, and feel free to link/abuse me if I have mistakenly reposted. :)
you should be able to blur it just by using something like this
$('input').blur();
you should put this inside the function/procedure that happens when you want it to disappear, unless your looking to disable it completely?
document.activeElement.blur() inside a try catch block works for me. (Possibly you also need a setTimeout? I didn't need a timeout, and it is important to avoid timeouts wherever possible because they can easily cause nasty heisen-bugs!)
Also double check that you are not calling focus() somewhere within a mousedown or click event (which causes the keyboard to show). You can use a console.log(document.activeElement.tagName); or similar to help find what has current focus.
However if you don't find a solution then I am very interested in seeing how you get the keyboard to stay up... I have a use for that :-)
i have made auto grow textarea.it's working fine but when copying and pasting using right click it's not working properly.if i use onchange event in this situation it won't work either because to fire this event we need press enter or tab. please help me to solve this problem
How about additionally listening to the onpaste event? It's not part of the standard, but works in most major browsers.
You could you a setTimeout to check the character length of the textarea and change it accordingly.. doesn't feel very nice though.
Alternatively you could detect that the right mouse button was clicked using the which or button variables. see here
All I need is to be able to click a button and have it do the KeyDown event for Enter, I've tired doing KeyDownCheck(13); and similar things, and I can get into the KeyDown event, but I can't get it to recognize that I want Enter, and it doesn't go to any specific key.
All Enter does is call another function, but when I try to call the function from a button it seems to call a different function which puts me back. Ironically, I had the same problem in the Enter event, but I fixed it with a return false; statement and I don't know how to do that for a button, so I was just going to call the KeyDown.
Is there a specific way to put this in? Thanks in advance
Notice, that key events are heavily browser specific. It is no fun at all really especially with none alphanumeric keys like 'enter'.
See here for a full run-down on all the issues.
See here for a test script, that helps you to determine the results your browser gives you.