in google search box which event fire? - javascript

in google search box when we typing something , On that time some auto complete result coming after select any one it automatically fire no need to
focusout()
or
any click()
how it create

There are basically three key related events keydown, keypress and keyup, it is using combination of these events... To make you understand more here is the detail
keydown is fired when the key is down (like in shortcuts; for example, in Ctrl+A, Ctrl is held 'down'.
keyup is fired when the key is released (including modifier/etc keys)
keypress is fired as a combination of keydown and keyup, or depending on keyboard repeat (when keyup isn't fired). (this repeat behaviour is something that I haven't tested. If you do test, add a comment!) If user keep key pressed, then this event is fired for every character added by the browser.
NOTE: Remember one thing, if you are fetching the value from the field never ignore the keyup event, because while getting text of the input you won't get the last type character from the textfield until keyup event is fired...
See this fiddle to get more idea about key events..

Related

Send key doesn't trigger key up or key down

Im sending keys to a input filter using sendkeys and supposed to be it will update the contents of the table, I check its screenshot and it placed the characters on the field. unfortunately after sendkeys, it doesnt trigger either keyup/keydown.
How to trigger keyup or keydown on casper?
Code:
this.sendKeys('input[name=\"filterString\"]', 'string');
casper.sendKeys() should have triggered the keyup and keydown events, because it uses native browser events which should be indistinguishable from user input in other browsers.
You trigger it yourself by keeping focus and then triggering those events:
this.sendKeys('input[name=\"filterString\"]', 'string', {keepFocus: true});
this.page.sendEvent("keydown");
this.page.sendEvent("keyup");
this.page.sendEvent("keypress");
For this you can use the underlying PhantomJS function page.sendEvent().

How to know if the key up event has been already done its job or not in the event handler

I have a key up event handler for a text box.
In that event handler I am checking for the key code 46/8 (Back space/Delete). And am getting the resulted value of the text box after these keys are pressed.
Lets say my textbox has 1234 and I want to get the value of the the text box in the event handler after deleting the last character. That mean I need 123 but when I read the value of the textbox it still shows 1234. How can I read the value of the text box after the event has done its job?
You want the keyup event:
The keydown, keypress and keyup events fire when the user presses a key.
keydown
Fires when the user depresses a key. It repeats while the user keeps the key depressed.
keypress Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
keyup
Fires when the user releases a key, after the default action of that key has been performed.
Source
since you have no related code posted.. i am assuming (with what you have mentioned)
That mean I need 123 but when I read the value of the textbox it still shows 1234.
.. you are using keydown event...
use keyup
$('#inputID').keyup(function(){
alert($(this).val());
});
I assume, you have a code like below.
$('input').keyup(function (e) {
if (e.keyCode == 46 || e.keyCode == 8) {
alert($(this).val())
}
})
It will return value after the key is pressed.

JQuery/DOM event for typing Chinese (ibus)?

as we know there is a lot of events will be triggered when we typing.
such as keyup, keydown, keypress or something else.
Is there any other event will be triggered only when the content in the text field is changed? and if there is not,how to write some javasrcipt code to accomplish this feature
The change event might help?
I've created a simple fiddle to determine what happens when a text node in a contenteditable element is modified by a key press. As I was doing that, I decided to check what happens when using ibus because I use ibus for my own work. I determined that when ibus is used, the only keyboard event generated is a keyup event with a which value which is useless.
Here is the fiddle I created:
http://jsfiddle.net/lddubeau/jWnL3/
Go to that fiddle.
Turn on your Javascript console.
Click run.
Click between the 2dn and third character of the word "toto".
Type something using ibus. For instance, type 我.
The output varies depending on your browser. On Chrome 29 each keystroke is recorded so if I type 我 using the tonepy method I get keyup and keydown for each of the "w" "o" "3" and "1". (The pinyin, the tone and then hitting 1 to select the first choice.) The final event is:
event type: keyup
which: 229
keyCode: 229
charCode: 0
node value:
to我to
The events before this one all have the same values except that some are of the "keydown" type and of course the node value shows "toto" until the last event.
On Firefox 23 only one event is registered:
"event type:" "keyup"
"which:" 49
"keyCode:" 49
"charCode:" 0
"node value:" "
to我to
"
No keydown or keypress events are generated. (When typing characters within the ascii range, you get keydown, keypress and keyup for each key.)
The values of which and keyCode do not seem to correspond to anything sensible. I've examined the event object passed to the event handler and did not see any field which would indicate that the user just typed 我.

Detecting input change in jQuery?

When using jquery .change on an input the event will only be fired when the input loses focus
In my case, I need to make a call to the service (check if value is valid) as soon as the input value is changed. How could I accomplish this?
UPDATED for clarification and example
examples: http://jsfiddle.net/pxfunc/5kpeJ/
Method 1. input event
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
In jQuery do that like this
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
starting with jQuery 1.7, replace bind with on:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Method 2. keyup event
For older browsers use the keyup event (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when "w" is released the input value is changed and the keyup event fires, but also when the "shift" key is released the keyup event fires but no change has been made to the input.). Also this method doesn't fire if the user right-clicks and pastes from the context menu:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
Method 3. Timer (setInterval or setTimeout)
To get around the limitations of keyup you can set a timer to periodically check the value of the input to determine a change in value. You can use setInterval or setTimeout to do this timer check. See the marked answer on this SO question: jQuery textbox change event or see the fiddle for a working example using focus and blur events to start and stop the timer for a specific input field
If you've got HTML5:
oninput (fires only when a change actually happens, but does so immediately)
Otherwise you need to check for all these events which might indicate a change to the input element's value:
onchange
onkeyup (not keydown or keypress as the input's value won't have the new keystroke in it yet)
onpaste (when supported)
and maybe:
onmouseup (I'm not sure about this one)
With HTML5 and without using jQuery, you can using the input event:
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
This will fire each time the input's text changes.
Supported in IE9+ and other browsers.
Try it live in a jsFiddle here.
As others already suggested, the solution in your case is to sniff multiple events.
Plugins doing this job often listen for the following events:
$input.on('change keydown keypress keyup mousedown click mouseup', handler);
If you think it may fit, you can add focus, blur and other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user's behaviour.
Attention: note that changing the value of an input element with JavaScript (e.g. through the jQuery .val() method) won't fire any of the events above.
(Reference: https://api.jquery.com/change/).
// .blur is triggered when element loses focus
$('#target').blur(function() {
alert($(this).val());
});
// To trigger manually use:
$('#target').blur();
If you want the event to be fired whenever something is changed within the element then you could use the keyup event.
There are jQuery events like keyup and keypress which you can use with input HTML Elements.
You could additionally use the blur() event.
This covers every change to an input using jQuery 1.7 and above:
$(".inputElement").on("input", null, null, callbackFunction);

Capturing key event for backspace

I am having difficulty capturing the backspace key as a keyboard Event in javascript/jQuery. In Firefox, Safari, Opera, Chrome, and on the iPhone/iPad, I capture a keyup event on a text input box like this:
$(id_input).keyup(function(event) {
that.GetHints($(this).val().trim(), event, fieldName);
});
This event captures user keystrokes, then sends them to a function to issue an ajax lookup call.
My problem comes when a user wishes to backspace over a character he/she already typed. In all the browsers to which I have access except for my Droid phone, when I press the backspace key, this keyup event captures the value returned by $(this).val().trim() and sends it on to process in function GetHints. On the Droid, however, neither this keyup nor an equivalent keydown event fires until the user backspaces over every character in $(this).
So, for example, if I type "cu" then backspace over the "u" leaving only "c" in the input field, in all browsers except Droid, the keyup event will fire and call function GetHints("c", event, fieldName). On the Droid, the keyup event never fires.
What am I missing? How/why does this backspace key, on either the soft keyboard or the hard keyboard, on my Droid not function as expected? How do I work around this?
You could poll for changes in the text (using setInterval). This would probably be more reliable. For example, keyup wouldn't fire if the user does right-click -> cut. Polling alone would be less responsive, but you could combine it with keyup to keep it snappy. Polling would be a bit more processor heavy.
Try something along these lines:
var oldText = '';
var timer = setInterval(function(){
var text = $(id_input).val().trim();
if(text != oldText){
oldText = text;
that.GetHints(text, fieldName);
}
}, 500);
Tweak the interval duration as necessary.
I'm not sure what that.GetHints does with event, but obviously, you wouldn't be able to pass that in using the polling approach (because there isn't an actual event being fired). Is this a problem?
You can use clearInterval(timer); to stop polling if you want to.
You could keep your existing keyup function as it is (to increase responsiveness). Alternatively, you may wish to just poll to avoid that.GetHints being called too much (e.g. if someone types something in really quickly).

Categories