I want to develop a simple app to measure dwell time and flight time (see http://www.techrepublic.com/article/reduce-multi-factor-authentication-costs-with-behavioral-biometrics/6150761) in a text area / box. how can I use keypress() or keydown() up() methods to record these events?
I don't understand why this would not be worth it. Just because Javascript can be modified on the client side does not mean an attacker could reproduce an actual user's typing patterns.
Doing this on the client side has the added benefit of keeping the user's data private (e.g. you're not actually collecting user's keystrokes, but only information related to their typing patterns).
I'm sure there are still privacy concerns, but this is a very interesting authentication (or auditing/detection) control.
See an example here: http://jsfiddle.net/VDMPt/ source
But as Andrea said, is not worth it since Javascript is client side
var xTriggered = 0;
$('#target').keyup(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keyup();
});
I believe this approach would not be fruitful in a real-world environment, because whatever processing you do in Javascript is, in line of principle, easily modifiable by the user, by using a simple javascript debugger or programs like Firebug.
That said, you could measure the two metrics in this way:
dwell time = time between keydown() and keyup(). In your keydown() method save the current time and in the keyup() compute the twell time as the difference between the current time and the keydown() time.
flight time: from the figure of the article you linked I can't easily understand how it is defined, but I would compute it as the difference between when you left the last key (keyup()) and when you start pressing the next key (keydown()). So in keyup() save a time, for instance last_key_time, and in keydown() compute the flight time as current_time - last_key_time
Related
I'm creating an input field where some data should be fetched (by AJAX) and displayed every time the user enters data into that field. However, if the user types several characters, say he types "test" to get all records who contain the string "test", it would not be necessary to do 4 queries after every character pressed, but one query after he stopped typing. I can think of several solutions with a global variable where I check if the same event has been fired again, but is there a really elegant way to do this? Maybe check if there is something in the keyboard buffer and only proceed if it is empty? Or is there an event that is only fired once the keyboard buffer is empty and all characters are in the input field?
The elegant way is to use a timeout, and to keep clearing the previous timeout with each key press
var tID;
function keyUp (e) {
if (tID) clearTimeout(tID);
tID = setTimeout(function() {
... // make web call
}, 2000);
}
This will ensure that the web call is only called after the last key is pressed (you may want to adjust the timeout value)
There are ways to achieve this that I can think of:
Use timeout, from the last keyup event. This is not always the best and not that precise with users that have low typing speed.
Use space character do regconize if the user has finished typing a word. Based on changes in length and total word count, you can decide if you would want to send AJAX or not.
Depends on the type of input you are working with, you may choose the most suitable method for you. The first one is somewhat quite rigid. The second method requires user to press space every time he finishs typing. A little bit of both could be a sweet spot perhaps. In modern day, I don't think sending request every keyup will cause huge performance effect though.
I have gone through answers and came across two ways which can help in distinguishing between scanner and keyboard inputs. It can be done through:
Time Based: Scanner inputs are faster than manual keyboard inputs.
Prefix Based: Append a prefix to barcodes or scanners (inbuilt in scanner devices) and use it to identify the scanner inputs.
Here are the links: link 1, link 2 which I have used for the references.
The problem which I have run into is that whenever the user manually types some keyboard keys while the scanning event is being fired it gets added to scanner input and leads to inconsistent results.
Here is the code which I am using:
var BarcodeScannerEvents = function(){
this.initialize.apply(this, arguments);
};
BarcodeScannerEvents.prototype = {
initialize: function() {
$(document).on({
keypress: $.proxy(this._keypress, this)
});
},
_timeoutHandler: 0,
_inputString: '',
_keypress: function (e){
if(this._timeoutHandler){
clearTimeout(this._timeoutHandler);
}
this._inputString += String.fromCharCode(e.which);
//CHECKS FOR VALID CHARACTERS WHILE SCANNING
this._timeoutHandler = setTimeout($.proxy(function(){
if(this._inputString.length <= 10){
this._inputString = '';
return;
}
$(document).trigger('barcodescanned', this._inputString);
this._inputString = '';
}, this), 20);
}
};
new BarcodeScannerEvents();
The format for my barcode is: ~xxx-xxx-xxxxxx where x can be any number between 0-9. If a character which is a number is appended to the barcode it leads to wrong inserts in the database.
I have tried comparing the events from keyboard inputs and scanner inputs but to no avail. I have given a thought of appending extra characters before each digit and then invalidate the scanned barcode if consecutive numbers appear. But I don't feel this is best way to approach this problem. Can someone help me out here?
It is not necessary to judge from keyboard/barcode scanner.
If you decide the Enter(Carriage Return) key notification as input completion on any device, you can use it as simplest trigger to execute Price Look Up/input value verification.
Most scanners can add suffix code to the scanned barcode data for notification.
The most commonly used is the Enter key, but the Tab key may also be used.
By sending the suffix code by the barcode scanner, the possibility that the scanner notification and the key input are mixed is much lower than the timeout detection.
You can do as follows.
Using the setting barcode, it is set to inform that keys such as Enter, Tab etc. which are not normally included in the barcode as a suffix.
Bind an event listener for the corresponding suffix key to the text input field.
The key code is judged in the event listener, and if it is the suffix key, it assumes that the input of the barcode data is complete, carries out processing such as Price Look Up/input value verification, and moves the input focus to the next field.
For example see this article.
execute function on enter key
In Addition:
Your worries seem to be overwhelmed by situations that do not occur often.
If it really happens to be a problem, you should give up dealing with JavaScript.
Please acquire scanner data with another program by the following method. Please notify it to the application in some way.
If you want to continue keyboard input emulation, it is better to capture data before the browser or application is notified.
SetWindowsHookExW function / LowLevelKeyboardProc callback function
EasyHook / Indieteur/GlobalHooks
hook into linux key event handling / uinput-mapper
The Linux keyboard driver / LKL Linux KeyLogger / kristian/system-hook
system wide keyboard hook on X under linux / Error when trying to build a Global Keyboard Hook in Ubuntu Linux / 10.5.2 Keyboard and Pointer Events
Alternatively, set the scanner to serial port mode and have a dedicated program to receive it.
Serial API
JavaScript/JQuery communicate with SerialPort/COM1
Questions tagged opos / Questions tagged pos-for-.net / Questions tagged javapos
My first answer would be to train the users not to touch the keyboard while scanning. However, the tone of your responses to answers and comments makes it sound like you're thinking more of malicious, intentional attempts to corrupt the data.
Beyond kunif's very thorough answer, you're not going to find a solution to the problem you're envisioning or running into. The reason is that JavaScript is only going to receive from the operating system's input buffer; JS will not (cannot! for OS security reasons) distinguish how the input buffer is filled. If keystrokes and scan data are simultaneously being put into the buffer, that is an issue to try to address at the OS or hardware level. JavaScript is just not equipped to deal with it.
I want to measure UI interaction time like following.
Time between Menu selected and showing result.
Time between User typing & showing letters in UI
I think many people suggest me to measure the time between function call & result, but I want to know another way to get the time though UI changes.
Is it possible to check the time for UI changes ?
The tool what I'm developing is made by Javascript and run on Browser.
Here is my answer:
"Javascript is single threaded".
So,what does this means:
Javascript runs code sequentially.It is not possible to run two
different pieces of Javascript code at the same time because it does
not support multithreading.
Execution of javascript code is line by line.So execution of multiple lines at same time is not possible(it will be very small though)
A simple solution:
check_my_time_first() ;//these will be functions returning the epoch time
check_my_time_after();
You just need console.log,flag variables and epoch time.
Firstly,the difference will be ultra small.
var milliseconds_before = (new Date).getTime();//use this code when user clicks
var milliseconds_after = (new Date).getTime();//use this when result appears.
Make use of flag variables to know when some execution has been completed.
Another example:
var execution_over=false;
function doSomething(){
console.log("start_time"+milliseconds_before)
//some code to be executed;
execution_over=true
if(execution_over==true){
console.log("time="+milliseconds_after)
}
}
Difference:
var diff=milliseconds_before - milliseconds_after;
Place this code smartly and you will see the difference in time.
The important thing is to understand the fundamentals.I hope my answer helped.
How can I create a Node.JS accurate timer? It should look like a kitchen timer or a stopwatch.
And I need accuracy, as much as possible. The application will promote some kind of "clicks war". I need to store every (concurrent) user's click, noting seconds and milliseconds (to tie the game).
How can I do it? Are there some code sample?
Thanks in advance.
Well You should have a look at microtime module, which gives you the time as accurate as microseconds. You can even measure CPU tick time with it!
As of the code well you can do something like this (Storing the time in objects and then accessing them with the user id, advantage would be no duplicate of the same user and faster access to one, if the user name is known):
var microtime = require('microtime');
, clicks = {};
click(function(user){ // An event listener for received clicks
clicks[user] = microtime.now();
});
or (pushing all in an array, advantage would be that it can be sorted, and easily all of them be iterated)
var microtime = require('microtime');
, clicks = [];
click(function(user){ // An event listener for received clicks
clicks.push({
user : user,
time : microtime.now()
});
});
As of node v0.8.0 you can use process.hrtime() which will return an array both containing a relative seconds and nanoseconds to past.
Back in college I wrote a game where the computer would sleep for 1 second, wake up and check to see if anything needed to be processed.
Of course, if the user entered a single character command, it would respond immediately.
Is there a way to do that with JavaScript?
setTimeout() and setInterval() will allow you to execute some code at regular intervals.
You can also monitor key press events in the DOM. Libraries like jQuery make this really easy with built in support for keyDown, keyUp and keyPress events. You can see these here: http://docs.jquery.com/Events
function processKeyCommand(){
...
}
document.onkeypress = processKeyCommand
function processEverythingEveryOneSecond(){
...
setTimeout(function(){processEverythingEveryOneSecond()}, 1000)
}
processEverythingEveryOneSecond()
:))