Develop Reference

HTML Buttons Aren't Deselecting After Click

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
}
}

Text changed event on jQuery when not fired with keyboard

Is there a way to fire an event every time I change the text on an <input type="text"> when the changes are not made pressing keys on the keyboard?
What I mean is I want to capture when somebody type in, right-click -> paste or drag a selected text on an input and not only when a key is pressed.
I've tried:
<input id="some-id" onchange="alert('fired')">
and
$('#some-id').on('change', ev_handler);
$('#some-id').change(ev_handler);
the only event that fires are the ones related to key press but they don't fire on pasting or dragging.

oninput event could met your needs, but just note it's not well supported in older browsers. You can find more info on Dottoro.
If you need to cover all browsers and all use cases like you mentioned, there is really no better way then periodically check (for example every 500ms) your input value with JavaScript.
You can find discussion about that here on StackOverflow.

Try the onChange event, that should be issued everytime the input is changed, no matter how.

iOS5 Safari: Keyboard does not hide in a home screen HTML app

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 :-)

Catching all changes to the contents of an input box using JavaScript/jQuery

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:
$('#input').bind('keyup cut paste', function(){...});
This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:
When the user selects a of text and drags it do a different position in the input box
When the user uses the Delete action in the right-click context menu
Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.
English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?

In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.
Demo (works in all browsers)

It's possible this SO question (and related jsfiddle) might answer your question.
(On the linked jsfiddle, put text in the top box to test)
In other words, bind to mouseup and mousedown, etc.

If you can't find a combination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.

Event to detect change of an HTML5 number control in Webkit/Chrome?

HTML5 gives us some new input elements to play with, such as <input type=number>. This renders (in Chrome) as a textbox with two cycle buttons inside the textbox, for incrementing and decrementing the numeric value inside the box.
For a personal hobby project, I'm using this control. However, I'm stuck with one issue:
Is there a way to detect the value being changed using a javascript event? I had expected the onChange event to fire, but no such luck. Also, onClick only triggers when the textbox content is clicked, not when the cycle buttons are clicked.
Any ideas? (apart from: hey, it's HTML5 Forms, don't expect anything to work yet!)
Edit: As mikerobi points out below, the onChange event does fire as soon as the element loses focus. Still not quite what I'm looking for, so other comments and suggestions are welcome!

Result of the bugreport: Won't Fix, because the input event is fired when those buttons are pressed. It's part of the HTML5 spec. So problem solved, thanks to mikerobi's sugestion to file the report.

The onChange event gets fired when when the box loses focus, but you probably already know that.
The HTML5 specifies that a number input should be a text box or spinner control, but the spec does not appear to have any guidelines for how a spinner should look or behave, leaving those decisions up to the browser vendors.
It appears that in the Mac Safari, the spin buttons do respond to click events, you might want to file a Chrome bug report, I suspect it was just an oversight.

$.click() works fine. If you click and hold, it doesn't until you release.