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

Question

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

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

有什么办法可以用 javascript、html 和 css 做到这一点？请注意，我希望我的greasemonkey 脚本在我不知道的网站布局上工作，所以我不能像这篇文章那样使用图像重新定位技巧：如何在文本输入字段中添加“搜索”按钮？

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/

希望有帮助。