vue2-keylogger-input
v1.0.7
Published
Keylogger input web component compatible with Vue2.
Downloads
65
Maintainers
Readme
Documentation
Installation via npm
npm i vue2-keylogger-input
Usage
In main.js file.
import Keylogger from "vue2-keylogger-input;
Vue.use(Keylogger);
Example component usage.
<vue2-keylogger-input
v-model="model"
:validation="validateLength"
placeholder="validation sentence"
:disableIfCorrect="true"
></vue2-keylogger-input>
Where validation function called validateLength is defined as:
validateLength(string) {
if (!string) return null;
if (string != null && string.length > 0 && string == 'validation sentence')
return "valid";
return "invalid";
},
Option disableIfCorrect is optional and makes input disabled if correnct sentence is provided for the first time.
Keys time delays included in statistics
- down_down_time - time between pressing two adjacent keys in time
- up_up_time - time between releasing two adjacent keys in time
- push - key push time ( down timestamp - up timestamp)
- up_time - moment of key release in time (ms)
- down_time - moment of key pushed in time (ms)
- key_code - key code
- key_value - key value for a specific code
Output
Output generated by passing word pwr. Output structure contains three objects:
- current - Part of the results containing information about the current state of data entered into the keylogger, including: the current phrase that is entered when the object is generated and the message whether the phrase is positively validated by the validation function passed to the keylogger during its initialization. In addition, it returns information about unique characters and the composition of the currently entered phrase.
- history - The part of the results containing information on the number of entered letters, the number of uniquely entered letters and the history of successively entered letters as to their value.
- timeline - The part of the results containing the course of successively typed letters in time, supplemented with detailed statistics
{
"timeline": [
{
"key_id": 1,
"key_value": "p",
"key_code": 80,
"key_down_time": 1637194599020,
"key_up_time": 1637194599097,
"key_pushed_time": 77,
"key_up_up_time": 202,
"key_down_down_time": 190
},
{
"key_id": 2,
"key_value": "w",
"key_code": 87,
"key_down_time": 1637194599210,
"key_up_time": 1637194599299,
"key_pushed_time": 89,
"key_up_up_time": 207,
"key_down_down_time": 199
},
{
"key_id": 3,
"key_value": "r",
"key_code": 82,
"key_down_time": 1637194599409,
"key_up_time": 1637194599506,
"key_pushed_time": 97,
"key_up_up_time": 0,
"key_down_down_time": 0
}
],
"history": {
"keys_history": [
"p",
"w",
"r"
],
"keys_number": 3,
"unique_keys_used": [
"p",
"w",
"r"
],
"unique_keys_number": 3
},
"current": {
"input_value": "pwr",
"valid": true,
"keys_used": [
"p",
"w",
"r"
],
"keys_number": 3,
"unique_keys_used": [
"p",
"w",
"r"
],
"unique_keys_number": 3
}
}
Features
- Vue2 support