Use Extension To Add Button To Text Field - Not Clickable

I'm trying to use a chrome extension to dynamically add a button when focusing on a text field (input or text area). the idea would be to click on the button to fill the text field

Solution 1:

The problem is in your onFocusIn code document.addEventListener('focusin', onFocusIn);. You are attaching onFocusIn on all elements in the documents. Since, a button is also an focusable element onFocusIn code executing on that as well.

Simple solution for that is :

function onFocusIn(event) {
    el = event.target;
    if(el.type != "button" && el.type != "submit" ) {
        if (el.contentEditable ||
            el.matches('input, textarea') && el.type.match(/email|number|search|text|url/))
        {
            appendButton(el);
        }
    }
}

You may want to change the document.addEventListener('focusin', onFocusIn); event code or adjust the binded function.

Hope this is helpful!