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

How to put a button inside of a text entry field in a form on a website using javascript, css, html

本文关键字：文本 输入 按钮 表单 字段 javascript 何使用 css html 网站      更新时间：2023-09-26

我想写一个润色脚本，在一些网站的文本输入表单中制作一个按钮，这样文本输入表单就会看起来像这样：

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

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

好吧，让我们从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/

希望能有所帮助。

相关文章：