Question

我正在尝试使用chrome扩展程序在聚焦文本字段（输入或文本区域）时动态添加按钮。我们的想法是点击按钮以按需填充字符串填充文本字段。

我找到了一些代码来添加按钮，但“onclick”不起作用。你会看到我有很多方法来触发控制台日志，但没有办法。我无法找到一种方法来完成这项工作，因此我要求就实现这一目标的方法提供一些指导。

清单

{
"name": "-",
"description": "-",
"version": "0.1",
"permissions": [
    "tabs","<all_urls>"
    ],
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
    },

"content_scripts": [
    {
    "matches": [
        "http://*/*",
        "https://*/*"
        ],
    "js": ["content.js"]
    }
],


"background" : { "scripts": ["background.js"] },

"manifest_version": 2
}

内容脚本

var btn = createButton();
document.addEventListener('focusin', onFocusIn);


var el;

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

function createButton() {
    var btn = document.createElement('button');
    btn.textContent = 'Yay!';
    btn.id = "explicite";
    console.log(btn);

    //not working
    btn.onclick = function(event) {
       btn.textContent += '!';
    };

    //not working
    btn.setAttribute("onClick", "alert('OnClick')");


    return btn;
}

function appendButton(textElement) {
    textElement.parentElement.insertBefore(btn, textElement.nextElementSibling);

    //not working
    document.getElementById("explicite").addEventListener('click', function() {
      alert("HI");
    });
}

Answer 1

问题出在您的onFocusIn代码document.addEventListener('focusin', onFocusIn);中。您正在将onFocusIn附加到文档中的所有元素上。因为，按钮也是在其上执行的可聚焦元素onFocusIn代码。

简单的解决方案是：

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);
        }
    }
}

您可能想要更改document.addEventListener('focusin', onFocusIn);事件代码或调整绑定功能。

希望这有用！

使用扩展名将按钮添加到文本字段 - 不可点击

1 个答案: