I am writing a web app that includes a search box that updates results as the user types.
The mechanism works because it is implemented identically on the desktop version.
The problem that I am having with it is that none of the event listeners (keydown, keyup, paste) are fired when the user enters text using a swipe input method.
Listening for a change event also doesn't work since the input must lose focus for the event to be fired.
With keyboards like Swype and Android's new keyboard supporting swiping this will be an easily noticed deficiency. What event should I listen for to detect this input?
The input event fires on each change to an input field (see fiddle) -- so you should use that instead of the other events. More info here: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input
Related
I understand that in Javascript, the 'keypress' event fires when a character gets inserted into the screen and the 'input' event fires when the input field of yours changes. I've seen many good explanations of the different types of events like here, but I was more wondering about the difference between those two events since they seem so similar. Specifically:
What, if at all, is the difference between keypress and input events? In my quick testing, it seems like keypress happens first, but is that it?
Under what circumstances would I use one over the other?
So actually those two events are not the same at all. Let me break it down for you.
keypress event triggers when any of your keyboard keys are pressed independently of the element you are focusing. If you press a key on a blank html page, the event will be triggered. This event is mostly used to trigger events like when there is a popup and you press escape, it hides it.
input event is specific to the case where you are currently typing or pressing keys while focusing an input element. With it, you can actually get the input value and do stuff with it like in a form, check if the password has symbols, a caps letter, and numbers.
This is the difference between those two events. They don't have the same use at all.
To answer your question about when you would use keyDown or keyUp versus input:
Navigation controls for games
Keys that don't change the text. For instance, using keyDown to detect 'esc' or 'F1' pressed. I commonly use keyDown detection of 'esc' to close popup windows
Can anybody please explain me the exact difference between input, keyup, keypress and afterkeydown events parameters for the value binding in knockoutJS ?I'm confused from reading about these from link, quoting the same below:
If your value binding also includes a parameter called valueUpdate, this defines additional browser events KO should use to detect changes besides the change event. The following string values are the most commonly useful choices:
input - updates your view model when the value of an or element changes. Note that this event is only raised by reasonably modern browsers (e.g., IE 9+).
keyup - updates your view model when the user releases a key
keypress - updates your view model when the user has typed a key. Unlike keyup, this updates repeatedly while the user holds a key down
afterkeydown - updates your view model as soon as the user begins typing a character. This works by catching the browser’s keydown event and handling the event asynchronously. This does not work in some mobile browsers.
Correct me if, I'm wrong the input event is happens once the user is finished typing the text in the textbox and the cursor is not still in the textbox. The keypress event is used to detect cases when the key is pressed for a long time, the event is fired and the characters are recorded proportional to the time of pressing.The keypress is high level event as compared to keyup and keydown.
The definitions of keypup and afterkeydown are what I find confusing and want to know particular use cases of these two, in context to valueUpdate binding.
I need to show/hide results when a user starts to type in the search field of an input element.
Some interesting events I can use would be
mousedown / mouseup
touchstart / touchend
focus
or perhaps ignore the "click" event altogether and just use the "change" event to 1. detect if text is present in the search box, 2. respond accordingly.
Since there are potentially many nuances specifically across devices which I don't own and can't test, I'm hoping someone can tell me which event I should be using to handle this scenario.
*- Note - the demo requires manual editing of the following until the proper event is configured
$("#local-filterable-listview").hide();
$("#defaultHomeContent").hide();
It seems like it really depends on what you want the exact behavior to be. If you want to trigger an action when the user first engages with the field, then you'd want to trigger based on:
touchstart
mousedown
focus
If you want to trigger only when content is changed in the field, you can respond to:
input
If you also want to support IE before IE9 (which doesn't support the input event, then you may also want to trigger based on:
keyup
drop
One of the most recommended ways to listen for a change of a input text field is to bind that field to a key up event. That works fine in most cases. But there are cases where this is not working. In Firefox for example one has the option, when text is already selected, to delete it by using the context menu. And this doesn't fire a key up event. I haven't found any event that is fired for that text field when doing this.
Any suggestions how I can react on this (in pure Javascript or jQuery)?
See the oninput event, and my write up about it here.
oninput fires for all forms of text input - including cut, paste, undo, redo, clear, drag and drop and spelling corrections. It's a HTML 5 event which isn't supported in Internet Explorer 8 and lower (but it is in the latest IE 9 preview). However, Internet Explorer supports a proprietary event on all DOM objects - onpropertychange. This fires whenever the value of an input element changes.
I didn't notice you'd tagged with jquery — since you did, it's probably worth mentioning that I wrote a plugin to implement the oninput event cross browser. You can find it here.
The best way is to store the value on a focus event and recheck the value on a blur event. Listening to key events fires a lot of usually redundant processes. Most of the time, you are only interrested in a field value when the user is done inputting (or deleting) it.
This works cross browser, though delegating focus/blur can be an issue in some browsers. The easiest way is to apply blur/focus listeners to the element directly.
Only exceptions are implementations like autosuggest/complete and even then you might want to debounce key input so it only fires when the user idles for a few hundred miliseconds.
I have an .ASP page that uses the onChange event to trigger a database lookup of information.
(After a Code is entered, the system validates the code and places the description next to it. I.E. GP1234 returns GP1234-Rubber Duck or GP1234-Invalid Code). The problem I am having is that my users that have the AutoComplete active get a list of previously used codes presented. If they use one of the codes in the list, the data is enteres, but not event is triggered to direct the page to verify the data. I have tried OnChasnge, OnBlur, and onMouseOut.
Any suggestions?
From Using AutoComplete in HTML Forms on MSDN:
To determine when a user updates the
content of a field from the
AutoComplete dialog box, use the
onpropertychange event, rather than
the onchange event, because the
onchange event does not fire.
Note that the onpropertychange event is proprietary to Internet Explorer so you'll still need handling for other browsers, and that it fires after every keystroke so it's not directly compatible with the onchange event.
Setting autocomplete="off" on the input will prevent it presenting previously entered values.
If you don't want to do that, the events you're likely looking for are onkeyup (for arrow/enter on the options) and onmouseup (for clicking on the options) events.