How is Google detecting user input? I looked around and the text field does not have the onkeyup or onchange events.
Is there any other way to detect user input in a text field?
it does have keyup and keydown listeners, but they are assigned at runtime, via addEventListener("keyup", ...). Use your browser's DOM inspector to select the input element, and then drill into the event listeners currently assigned (in webkit's inspector, that's under "Event Listeners" at the bottom of the right-hand pane) -- you'll see keyup, keydown, and several others.
It does have event listeners. Using the inspect element on chrome you can clearly see the listeners - highlighted in the screen shot below.
The same principle as autocomplete:
http://www.javascript-examples.com/autocomplete-demo/
I would say an onblur onkeyup/down event that triggers a custom event that waits for a pause or space, then sends the data, then handles the return.
After playing with it for a while here is what I came up with at jsfiddle:
http://jsfiddle.net/fauxtrot/Ejqyb/
Related
I'm trying to make a chrome extension with javascript which triggers an action on key presses when I'm typing an email in gmail.
I manage to make the extension, which performs a console log correctly when I press the keys on any page.
My problem comes when capturing the event when I am typing in a gmail email writing input, it doesn't capture the event.
The body text box is a contenteditable div, and the from and subject text boxes are inputs. I don't know if this helps
The JS code I inject is as follows:
document.addEventListener('keydown', function (e){
console.log('push')
});
The code works in the search input of the page but not in the write input of the email.
Does anyone know why?
Using document.addEventListener is probably not the right way to go when adding event listeners.
There's a 90% chance that the keydown event is being directly handled by the contenteditable div and the input elements which prevents it from being handled by the document itself. You may need to attach the event listener directly to the contenteditable div and the input elements (referencing them in some way or another - you can take a look at how MailTrack or some Gmail extension to see how they do it), rather than the document.
You can try opening up inspect element and seeing if the classes or IDs change, and make a decision on how to hook them up to your code using those; and attaching the appropriate event listener to them.
You can also try using event delegation to attach the appropriate event listener to a parent element of the input and contenteditable div; then check the event target to see if it is the element you are interested in - but I won't get into that since it's probably not the best approach to this type of situation.
It's entirely possible - since if another chrome extension can do it, yours can probably do it as well. It just comes down to information collection and the appropriate research.
I have been trying to understand JavaScript keypress, keydown, keyup and input events. But I found them quite confusing. Could someone please point out the exact differences? Also I would like to know do all of them get triggered when the user paste a piece of text.
According to jQuery docs:
The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.
The keyup event is sent to an element when the user releases a key on the keyboard.
The oninput event it's an event that triggers whenever the input changes.
However the input event is not supported in IE version below 9. In that case, you could use proprietary event onpropertychange, it does the same as oninput.
But in your case, you could use the paste and change event together. You should use change too because paste only happens on browsers that support it on an explicit paste.
Since this is being treated as the definitive JS answer (rather than just a jQuery answer) here's a current standard JavaScript answer with MDN references:
input event - fired when the content changes. This includes mouse pastes and non-keyboard input.
keyup event - fired when a key is released. This includes shift key, control key, and other keys that don't change the value of input elements.
Docs for all events
I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
If I use xss, what's the difference between typing in ALERT('DSSA');, or just paste it to a search textfield? In a site, typing works, and makes the alert, but if I just paste it, than it doesn't. To prevent the question, I don't want to hack any site, I'm just interested in network security.
thanks for the answer
This will be because the programmer who built the website is lazy and hasn't listened for the onpaste event.
Typing fires the onkeydown, onkeypress and onkeyup events, and are the standard events to consider when watching for user input.
It would seem those are the only events the programmer has listened for (which makes this irrelevant of network security).
If this is not the case, then he'll be using two different event handlers for the events; one which escapes the input, and in the other he's forgotten.
I may not have understood the question properly.
Typing triggers keyUp, keyDown and keyPress events on the element. If the codes are programmed to capture them only, then only those events will be captured.
Pasting can be done using keyboards, mouse and browser options. So this depends on which events you are listening too. There is a separate event called onpaste which will ease everything.
What I mean is, lets say my code is written to capture the pasting my pressing "Ctrl" + "v" only, but if mouse and browser options are used to paste on the
element, then it is configured to capture mouse events also, it cannot
be captured.
I want to catch the event when the user select a text in Firefox page like IDM add-on (or IE8+) show a button when user select text.
Can anyone help me?
You could attach a mouseup event listener and a keypress listener respectively for mouse and keyboard selections, and then use window.getSelection() to tell if any text is selected.
Somewhat surprisingly, there's no simple way to do this. IE has a select event that is implemented on all elements but other browsers have never extended this beyond inputs. You'll have to handle keyup and mouseup events for the whole document, and write some code to compare the current selection with the previous selection from when the event handler last ran.