Question

我试图编写一个脚本，允许我通过chrome扩展插入网页的文本字段中的按钮。我想做的是类似于Chrome扩展Last Pass所做的事情，即insert a button into the login fields of username and password。我使用以下代码示例找到了here的解决方案：

     var forms = document.getElementsByTagName('form');
     for (var i = 0; i < forms.length; i++) {
       var form = forms[i];
       var inputs = form.querySelectorAll("input[type=text]");
       for (var j = 0; j < inputs.length; j++) {
         var input = inputs[j];
         button.className = "inputFieldButton";
         input.parentNode.insertBefore(button, input.nextSibling);        
       }
     }

但代码只是将按钮附加到输入字段的末尾。这是我用于按钮的CSS代码：

    .inputFieldButton{
      display: inline;
      padding-right: 50px
      background-image: url("/images/buttonInputField.png");
      cursor: pointer;
      position:relative;
      background-attachment: scroll;
      background-size: 16px 18px;
      background-position: 98% 50%;
      background-repeat: no-repeat;
    }

这是该代码的result。有没有一个解决方案可以让我将按钮插入到字段中。我对这一切都很陌生，所以任何帮助都会非常感激。

此外，我现在已经更改了css文件中的类名。

Answer 1

这仅仅是一个CSS问题，并且有很多方法可以将按钮放在输入字段中＃34;。在此之前，你最好先学习一些css知识。

一种简单的方法是将margin-left: -50px;添加到您的css文件中，像素大小取决于您，并且不要忘记修改您的代码以确保您的按钮正在使用正确的类（您只是使用＆＃34; inputFieldButton＆＃34;作为类名，但在css文件中它是＆＃34; inputButton＆＃34;）

使用chrome扩展程序 - HTML，CSS，JavaScript将可点击的图标/按钮添加到输入字段

1 个答案: