Seems like others have ran into this issue outside of the browser. I'm trying to figure out how to deal with it in my javascript code.
When I hold command (on mac) and press and let go of another key, (such as if I were to enter command-c to copy some text), the keyup event does not fire unless I let go of command first.
This affects me because my web app responds to the alt-x key combination to toggle a menu, and this is important. I'm using keyup and keydown events to track the state of which keys are pressed at any given time, so that I can toggle the menu when the user enters alt-x (and not some other combination including alt-x). It works great until I enter command-[some key] and then my program thinks I'm entering [some key]-alt-x when I enter alt-x to toggle the menu.
Does anyone have any ideas for how to deal with this situation?
I made a code pen to illustrate the problem.
const pressed_keys = {};
const keydown_handler = e => {
pressed_keys[e.code] = true;
if (has_entered_alt_x(e)) {
document.querySelector('div').classList.toggle('blue');
}
};
const keyup_handler = e => pressed_keys[e.code] = false;
const has_entered_alt_x = e => {
if (!(e.altKey && e.code == 'KeyX')) return false;
for (const key in pressed_keys) {
if (Object.hasOwnProperty.call(pressed_keys, key)) {
if (!['AltLeft', 'AltRight', 'KeyX', 'CapsLock'].includes(key) &&
pressed_keys[key]) {
return false;
}
}
}
return true;
}
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('keydown', keydown_handler);
document.addEventListener('keyup', keyup_handler);
});
div {
width: 40px;
height: 40px;
background-color: red;
}
.blue {
background-color: blue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div></div>
</body>
</html>
Here's a decent work around I came up with, and you can try it in this code pen.
const pressed_keys = {};
const keyup_handler = e => {
pressed_keys[e.code] = false;
// In macos the keyup event doesn't fire when the Meta key is held down.
// So, when Meta key is lifted, assume other keys have also been lifted
// as well. There is a bug introduced: If the user is quick, they can
// hit meta-c, lift the meta key and then hit alt-x very quickly
// thereafter, and in this case they will be able to toggle the change
// while holding down some other key. This is unlikely to occur and in
// the event that it does, it doesn't cause problems for the application.
if (e.key == 'Meta') {
Object.keys(pressed_keys).forEach(key => { pressed_keys[key] = false; });
}
}
const keydown_handler = e => {
// In macos the keyup doesn't fire on the Meta key (command) after
// certain key combinations in the browser, such as
// M-Q : shutdown computer
// M-p : print page
// M-o : opens files
// M-t : new tab
// M-y : opens history
// and possibly others. So, to be able to detect when this has happened,
// on keydown ask if the meta key is pressed using e.meta and query
// pressed_keys to see if the key up event has fired. If meta isn't
// pressed by the keyup event hasn't fired set all pressed_keys to false.
if (!e.metaKey && (pressed_keys['MetaLeft'] || pressed_keys['MetaRight'])) {
Object.keys(pressed_keys).forEach(key => { pressed_keys[key] = false; });
}
pressed_keys[e.code] = true;
if (has_entered_alt_x(e)) {
document.querySelector('div').classList.toggle('blue');
}
};
const has_entered_alt_x = e => {
if (!(e.altKey && e.code == 'KeyX')) return false;
for (const key in pressed_keys) {
if (Object.hasOwnProperty.call(pressed_keys, key)) {
if (!['AltLeft', 'AltRight', 'KeyX', 'CapsLock'].includes(key) &&
pressed_keys[key]) {
return false;
}
}
}
return true;
}
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('keydown', keydown_handler);
document.addEventListener('keyup', keyup_handler);
});
I am building a website on chrome in Mac. The meta+m hotkey will minimize the browser. Is there a way for me to listen on this key event and stop it from going to minimize?
I tried below code it works but I am looking for a better solution:
$('#myinput').on('keydown', e => {
if (e.key === 'Meta') {
metaPressed = true;
}
if (e.key === 'm' && metaPressed) {
console.log('klsjdflkasj')
e.preventDefault();
}
}
$('#myinput').on('keyup', e => {
if (e.key === 'Meta') {
metaPressed = false;
}
}
basically, it works by remembering the meta keypress and check the next input character. The above code works fine but is there any solution works as below:
mydom.on('meta m', () => { ... })
How do you disable/ view source/ and /inspect element/, ctrl + u ctrl+shift+I f12 menu bar and right click, also ctrl + s ctrl p ctrl+v ctrl+a ctrl+c and drag select page, please answer all parts that's possible, I prefer to do this will JavaScript array keycodes or html no php or other languages.also I want to block ifram use on my site like somesites such as google.
As I understand it is not possible to completely disable view source and inspect element, so I want minification of code and rest of my question answered instead.
Edit:
I solved alot of it myself, I used onkeydown return false to disable all keys, still need the arrays, I disabled inspect element menu bar by forcing browser to window.open I still need right click, however would like to add that I need a custom right click menu, I disabled the possibility to disable Javascript in order to stop the key block by using noscript function redirects. I also still need the drag and select part. I would still like betterways to fix it...maybe even just minify the code or encrypt it. Of anyone needs some of the code I used just reply. I just need to fix it.
It is not possible to prevent the user from inspecting code running on their machine. At the end of the day the HTMl they are getting delivered will be readable in plain text. You can cause a nuisance for most people, but this will not be a valid security measure - chrome extensions will still run, for instance, so if someone is using the NoScript extension it will disable all javascript.
A much better option would be to handle your logic serverside, and only send the client the information they need to know/requested.
There are some free javascript obfuscators, such as https://javascriptobfuscator.com/. Please remember that it is not a secure method, though.
I mean no matter how much you block it a person can just type
view-source:https://example.com
document.onkeydown = function(e)
{
if(event.keyCode == 123)
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))
{
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0))
{
return false;
}
}
e is a keyboard event. e.[key] returnes true if key pressed.
If document.onkeydown returns false, key doesn't count.
This programm seeing if code view combination pressed and returning false.
Example. if ctrl, shift and 'J' pressed - return false.
Bump
To the people saying it isn't possible, how would you recon this website managed to do so?
The following website disabled, view source, right click and the dev console.
I am genuinely interested.
https://www.techgyd.com/contact-facebook-directly/6579/
Edit:
all input from keyboard is disabled, but by adding "view-source:" before the httpps:// to the url to become:
view-source:https://www.techgyd.com/contact-facebook-directly/6579/
makes me able to see.
If you would like to know how they did that then take a look at their JS, raw copy/paste:
<script type="text/javascript">
//<![CDATA[
var show_msg = '';
if (show_msg !== '0') {
var options = {view_src: "View Source is disabled!", inspect_elem: "Inspect Element is disabled!", right_click: "Right click is disabled!", copy_cut_paste_content: "Cut/Copy/Paste is disabled!", image_drop: "Image Drag-n-Drop is disabled!" }
} else {
var options = '';
}
function nocontextmenu(e) { return false; }
document.oncontextmenu = nocontextmenu;
document.ondragstart = function() { return false;}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode === 123) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
//alert(event.keyCode); return false;
if (event.keyCode === 123 ||
event.ctrlKey && event.shiftKey && event.keyCode === 73 ||
event.ctrlKey && event.shiftKey && event.keyCode === 75) {
if (show_msg !== '0') {show_toast('inspect_elem');}
return false;
}
if (event.ctrlKey && event.keyCode === 85) {
if (show_msg !== '0') {show_toast('view_src');}
return false;
}
}
function addMultiEventListener(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i = 0, iLen = events.length; i < iLen; i++) {
element.addEventListener(events[i], function (e) {
e.preventDefault();
if (show_msg !== '0') {
show_toast(listener);
}
});
}
}
addMultiEventListener(document, 'contextmenu', 'right_click');
addMultiEventListener(document, 'cut copy paste print', 'copy_cut_paste_content');
addMultiEventListener(document, 'drag drop', 'image_drop');
function show_toast(text) {
var x = document.getElementById("amm_drcfw_toast_msg");
x.innerHTML = eval('options.' + text);
x.className = "show";
setTimeout(function () {
x.className = x.className.replace("show", "")
}, 3000);
}
//]]>
</script>
or just look from line 86
I hope it helps
This Meteor client event works fine on desktop browser but fail to do the same on mobile browser "Chrome".
It detects the key entry of "g" after "#" and replace it with "#gmail.com".
Any idea how to get it to work on mobile phone as well? thx
Template.input.events({
'keypress input': function (evt, template) {
if (evt.which === 13) {
//do stuff
}
else if (Session.get('taskSelected') === 'walk') {
if (evt.which == 103) { // "g" has been typed do gmail.com
utility.inputReplaceWith('gmail.com', evt);
}
else if (evt.which === 121) { // "y" for yahoo.com
utility.inputReplaceWith('yahoo.com', evt);
}
else if (evt.which === 104) {
utility.inputReplaceWith('hotmail.com', evt);
}
}
}
});
inputReplaceWith: (text, evt) => {
let elem = document.getElementsByName('email')[0].value;
if (elem.slice(-1) == '#') { // last char is "#"
evt.preventDefault();
document.getElementsByName('email')[0].value = elem + text;
}
},
There is a textInput event that gives you the entered character and is also cancellable
const inputField = document.getElementById('wanted-input-field');
inputField.addEventListener('textInput', function(e) {
// e.data will be the 1:1 input you done
const char = e.data; // In our example = "a"
// If you want the keyCode..
const keyCode = char.charCodeAt(0); // a = 97
// Stop processing if "a" is pressed
if (keyCode === 97) {
e.preventDefault();
return false;
}
return true;
});
Looks like "keypress" event in Chrome for Android is troublesome.
See:
keycode is always zero in Chrome for Android
Capture keys typed on android virtual keyboard using javascript
TL;DR: use "keydown" and/or "keyup" event(s) instead, or even "input" event.
I'd like to be able to scan barcodes via a hand held scanner and handle the results with Javascript.
A barcode-scanner works almost like a keyboard. It outputs the scanned/translated (barcode->number) data raw (right?). Actually I just need to catch the output and proceed. But how?
Here's some pseudocode I'd like to make work:
$(document).on("scanButtonDown", "document", function(e) {
// get scanned content
var scannedProductId = this.getScannedContent();
// get product
var product = getProductById(scannedProductId);
// add productname to list
$("#product_list").append("<li>" + product.name + "</li>");
});
Any ideas (frameworks, plugins, snippets)?
Any barcode-scanner (hardware) recommendation?
I found this and this good questions but I'd like to get more information about the handling. Just to focus a textarea may be not enough in my case.
Your pseudo code won't work, because you don't have access to the scanner to catch events like scanButtonDown. Your only option is a HID scanner, which behaves exactly like a keyboard. To differentiate scanner input from keyboard input you have two options: Timer-based or prefix-based.
Timer-based
The scanner is likely to input characters much quicker than a user can (sensibly) with a keyboard. Calculate how quickly keystrokes are being received and buffer fast input into a variable to pass to your getProductsId function. #Vitall wrote a reusable jQuery solution for catching barcode scanner input, you would just need to catch the onbarcodescanned event.
Prefix-based
Most scanners can be configured to prefix all scanned data. You can use the prefix to start intercepting all input and once you've got your barcode you stop intercepting input.
Full disclosure: I work as a consultant to Socket Mobile, Inc. who make handheld scanners.
After a lot of research and testing, what worked the best for me was to capture input from a barcode scanner without focusing a form input. Listen to the keydown and textInput events.
The textInput event acts like a paste event. It has then entire barcode data. In my case I am looking for UPC barcodes. The e.preventDefault() prevents the barcode data from being inserted into a form input:
document.addEventListener('textInput', function (e){
if(e.data.length >= 6){
console.log('IR scan textInput', e.data);
e.preventDefault();
}
});
I have tested this on Android 4.4 and 7.0 with a CipherLab IR scanner.
Example for listening to the keydown event. In my case I am able to assume that as long as a form input is not focused, the user is scanning a barcode.
let UPC = '';
document.addEventListener("keydown", function(e) {
const textInput = e.key || String.fromCharCode(e.keyCode);
const targetName = e.target.localName;
let newUPC = '';
if (textInput && textInput.length === 1 && targetName !== 'input'){
newUPC = UPC+textInput;
if (newUPC.length >= 6) {
console.log('barcode scanned: ', newUPC);
}
}
});
Of course, rather than checking the length of the string to determine a scan, you can listen for the e.keyCode === 13 in the keydown event listener.
Not all IR scanners will trigger the textInput event. If your device does not, then you can check to see if it is emitting something similar with:
monitorEvents(document.body);
Found this monitoring trick here: How do you log all events fired by an element in jQuery?
I'm little late but I made this work around based in some answers here.
let code = "";
let reading = false;
document.addEventListener('keypress', e => {
//usually scanners throw an 'Enter' key at the end of read
if (e.keyCode === 13) {
if(code.length > 10) {
console.log(code);
/// code ready to use
code = "";
}
} else {
code += e.key; //while this is not an 'enter' it stores the every key
}
//run a timeout of 200ms at the first read and clear everything
if(!reading) {
reading = true;
setTimeout(() => {
code = "";
reading = false;
}, 200); //200 works fine for me but you can adjust it
}
});
A barcode-scanner works almost like a keyboard.
It depends on the model. Every one that I've used works exactly like a keyboard (at least as far as the computer is concerned)
It outputs the scanned/translated (barcode->number) data raw (right?).
It outputs keycodes.
$(document).on("scanButtonDown"
You probably want keypress, not scanButtonDown.
Look at the event object to determine the "key" that was pressed.
To determine when the entire code has been scanned, you might get an "end of data" key (possibly a space or a return) or you might have to just count how many characters are being input.
Here is working fine.
It's working when input has focus and input hasn't focus
on_scanner() // init function
function on_scanner() {
let is_event = false; // for check just one event declaration
let input = document.getElementById("scanner");
input.addEventListener("focus", function () {
if (!is_event) {
is_event = true;
input.addEventListener("keypress", function (e) {
setTimeout(function () {
if (e.keyCode == 13) {
scanner(input.value); // use value as you need
input.select();
}
}, 500)
})
}
});
document.addEventListener("keypress", function (e) {
if (e.target.tagName !== "INPUT") {
input.focus();
}
});
}
function scanner(value) {
if (value == '') return;
console.log(value)
}
HTML
<input type="text" id="scanner" placeholder="scanner">
Tried all the solutions, but not worked as expected. I found very easiest solution onscan.js I have application using angular 8.
Very simple and good implementation.
For angular 8, I followed steps:
1.npm install onscan.js --save
2.open angular.json, add one entry to script array as "node_modules/onscan.js/onscan.min.js"
3.In component class, implement interface AfterViewInit
declare var onscan:any;
ngAfterViewInit(): void {
//Put focus to textbox and press scanner button
onScan.attachTo(document, {
suffixKeyCodes: [13], // enter-key expected at the end of a scan
reactToPaste: true, // Compatibility to built-in scanners in paste-mode (as opposed to keyboard-mode)
onScan: function (sCode, iQty) { // Alternative to document.addEventListener('scan')
console.log('Scanned: ' + iQty + 'x ' + sCode);
},
});
}
Best thing is scanned text appears into focued textbox element
Hope this help.
I wanted to share this topic using React too, as I struggled a lot with it.
I think most of the barcode scanners, such as Hanz Herdel said, terminate with ENTER. In my case, I found easier to wrap the input in a form and catch the submission event, prevent default and retrieve the value of the input.
I preferred this type of approach so to handle any type of barcode length, instead to check the length of it.
Here's how I handled it in React:
import { useState } from "react";
export default function Modal() {
const [repairArticles, setRepairArticles] = useState([]);
function handleBarcodeInput(e) {
e.preventDefault();
const input = e.target.querySelector("input");
const value = input.value;
setRepairArticles((prev) => {
return (prev = [...prev, value]);
});
input.value = "";
}
return (
<div>
<form onSubmit={(e) => handleBarcodeInput(e)} >
<input id="barcode-input" />
<button type="submit" className="hidden" />
</form>
<div className="mt-3">
{repairArticles.map((el, index) => {
return <p key={index}>{el}</p>;
})}
</div>
</div>
)
}
This is an extension to the answer given by Hanz Herdel incase you are using one of the PosX scanners or any other scanner that are capable of adding a special symbol to the beginning of the characters. In this case, the tilde (~) symbol:
let barcode = "";
let reading = false;
document.addEventListener("keydown", e => {
//console.log(e.key);
if (e.key == 'Enter') {
if (barcode.length == 17) {
if (barcode.charAt(0) == '~') {
console.log(barcode);
barcode = "";
}
}
}
else {
if (e.key != 'Shift') {
barcode += e.key;
}
}
if (!reading) {
reading = true;
setTimeout( () => {
barcode = "";
reading = false;
}, 200);
}
}, true)
You can change the barcode length and the timeout speed to your liking but this worked perfect for me.
Vue 2 implementation (i think vuejs's syntax is similar to angular):
BarcodeScanner.vue component code is here:
<template>
<input type="hidden" name="_barcode" v-model="finalCode" />
</template>
<script>
export default {
props: {
onSuccess: {
type: Function,
required: true
},
minLength: {
type: Number,
default: () => 10
}
},
data() {
return {
code: "",
finalCode: "",
fromScanner: false,
reading: false
};
},
mounted() {
document.addEventListener("keypress", this.documentKeyboardListener);
},
destroyed() {
document.removeEventListener("keypress", this.documentKeyboardListener);
},
methods: {
documentKeyboardListener(e) {
if (e.target.nodeName !== 'BODY') return;
if (e.code === "Enter") {
if (this.reading && this.code.length > this.minLength) {
if (this.onSuccess)
this.onSuccess(this.code);
this.finalCode = this.code;
this.code = "";
this.fromScanner = true;
}
} else {
this.code += e.key; //while this is not an 'enter' it stores the every key
}
//run a timeout of 200ms at the first read and clear everything
if (!this.reading) {
this.reading = true;
setTimeout(() => {
this.code = "";
this.reading = false;
this.fromScanner = false;
}, 200); //200 works fine for me but you can adjust it
}
},
},
};
</script>
You can invoke the component anywhere:
...
<barcode-scanner onSuccess="yourListener"/>
...
(Js scanner code is taken from Hanz Herdel)
I've just started working on a plugin that handles barcode scanning and credit card scanning (built on jQuery):
https://github.com/ericuldall/jquery-pos
Simple implementation:
$(function(){
$(document).pos();
$(document).on('scan.pos.barcode', function(event){
var barcode = event.code;
//handle your code here....
});
});
So far this plugin is only tested with one type of scanner and codes containing only digits, but if you have further requirements that aren't working with it, I'd be happy to adapt it to your needs. Please check out the github page and give it a whirl. Contributions are encouraged.
E
var txt = "";
function selectBarcode() {
if (txt != $("#focus").val()) {
setTimeout('use_rfid()', 1000);
txt = $("#focus").val();
}
$("#focus").select();
setTimeout('selectBarcode()', 1000);
}
$(document).ready(function () {
setTimeout(selectBarcode(),1000);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" name="tag" id="focus" placeholder="Use handheld RFID scanner">
Needs hardening but this routine, which counts on scanned data being sent in under 100ms, is working in production. Thanks to #jfbloom22 and other answers for inspiration and reminding me of monitorEvents.
It appears scanners need to be set to send "HID Keyboard"-type data(?) and be set to terminate with "Enter".
Although is purely JavaScript logic, was written in TypeScript app for a PCF (Power Apps Component Framework) project that allows the app to accept scan data without the need to focus on an input box. Globals were used as a convenience.
public Scan(evt: Event): void {
const e:KeyboardEvent = evt as KeyboardEvent;
const timeDiff = e.timeStamp - CheckInPCF.LastTimeStamp;
CheckInPCF.LastTimeStamp = e.timeStamp; //"global"
//console.log(e.key + ': ' + timeDiff);
if (timeDiff < 100) {
if (e.key == 'Enter') {
//Assemble complete scan text
CheckInPCF.ScanText = CheckInPCF.FirstCharacterCandidate + CheckInPCF.ScanText; //.replace('\u000D','');
//console.log('finished: ' + CheckInPCF.ScanText);
CheckInPCF._this._notifyOutputChanged(); //Power Apps related
}
else {
CheckInPCF.ScanText += e.key;
}
}
else {
CheckInPCF.ScanText = '';
CheckInPCF.FirstCharacterCandidate = e.key;
}
}
This code works fine for me, you can try it
var barcode = '';
var interval;
document.addEventListener('keydown', function(evt) {
if (evt.code === 'F12'){
evt.preventDefault();
}
if (interval){
clearInterval(interval);
}
if (evt.code == 'Enter') {
if (barcode){
$('#barcode').val(barcode);
console.log(barcode);
}
barcode = '';
return;
}
if (evt.key != 'Shift'){
barcode += evt.key;
}
interval = setInterval(() => barcode = '', 20);
});