<input type="text" id="firstName" name="firstName" value="">
<p id="firstNameDisplay"></p>
let Person = { firstName: "" }

let PersonProxy = new Proxy(Person, {
    set(target, property, value) {
        target[property] = value;
        if(property == 'firstName'){
            document.getElementById('firstNameDisplay').innerText = Person.firstName;
        }
    }
});

document.getElementById('firstName').addEventListener('keyup', function(e){
   PersonProxy.firstName = this.value;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.