javascript - 如何使用 javascript、css、html 在网站表单的文本输入字段中放置一个按钮

Question

我想写一个 greasemonkey 脚本，在某些网站的文本输入表单中创建一个按钮，这样文本输入表单看起来像这样:

         ____________________ 
Username:|___________|BUTTON|
         ____________________
Password:|___________|BUTTON|

有什么方法可以用 javascript、html 和 css 做到这一点吗？请注意，我希望我的 greasemonkey 脚本能够在我不知道的网站布局上运行，所以我不能使用本文中的图像重新定位技巧:How do I add a "search" button in a text input field?

Answer 1

好的，让我们从 jQuery 开始，因为它更简洁。

$('form').each(function () {
    $(this).find('input').filter(':text').each(function () {
        $(this).after($('<button>').text('My Button'));
    });
});

http://jsfiddle.net/xERT8/2/

针对非 jquery 版本进行了编辑。

好的，我们开始吧!

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];
        var button = document.createElement('button');
        button.innerText = 'My Button';
        input.parentNode.insertBefore(button, input.nextSibling);        
    }
}

http://jsfiddle.net/53QQU/6/

希望对您有所帮助。