How to Prevent RFID card reader imitation in html form?

Question

I'm using an RFID card reader to authenticate users into a web-service. The reader acts a keyboard, once it reads a card it "types" its serial number followed by a newline which submits the html form.

I'm trying to write a script that would detect if a user actually types a serial number into the input field rather than scanning a card.

My current solution is to make the input field look more like a button than like a field, but this is not an elegant solution.

Any better ideas?

Answer 1

I used the following technique: detecting copy/paste and timing the intervals between the keystrokes. Here's my code.

html

<input name="card_number" id="card_number" oninput="detectHumans();" placeholder="SCAN CARD"/>

JS

        var x = -1;
        var delta = 0;
        var count = 0;
        function detectHumans() {
            count += 1;
            if ($("#card_number").val().length != count) {
                alert('human detected');
                $("body").html('');
            }
            console.log($("#card_number").val());
            y = Date.now();
            if (x == -1) {
                x = y;
            }
            else if (delta == 0) {
                delta = y - x;
                x = y;
            }
            else{
                var new_delta = y - x;
                console.log(delta);
                console.log(new_delta);
                if (Math.abs(new_delta - delta) > 10) {
                    alert('human detected');
                    $("body").html('');
                }
                delta = new_delta;
                x = y;
            }
        }