clicking the form field start inputting/overriding existing value-CodePudding

I am asked to do the following:

allow the user to click anywhere in the field and start inputting that would then override the digits as they are entering.

The solution I have works when user clicks next to the digit(s) they attempt to re-enter the revised digits. which I believe is pretty standard in UI practice. Does anyone have a solution on how to achieve what is asked in the bolded area, update the phone number field by clicking the field, and start inputting/overriding.?

//have an observer on the following function:

static get observers() { return [
    _workNumber(_contract.workPhone),
}}

_workNumber(str) {

    let cleaned = (''   str).replace(/\D/g, '');
    let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) {

        //the binding value in the input tag in HTML.
        this._contract.workPhone = '('   match[1]   ') '   match[2]   '-'   match[3];
        return '('   match[1]   ') '   match[2]   '-'   match[3]
    };

        return null

};

CodePudding user response：

What's needed here is called "overtype" as with the insert key.

See here