javascript - 如何使用 JavaScript 将输入提交元素转换为按钮元素？

Question

我正在尝试将<input type="submit">按钮<button>及其所有 id、类、事件、tabindex 等转换为元素。

有什么好的方法吗？jQuery 也是一种选择。

注意：我无权访问原始<input type="submit">html 代码。

Answer 1

var input = document.yourWayOfSelectingIt('maybeAnID');

input.outerHTML = input.outerHTML.replace(/^\<input/, '<button') + input.value + '</button>';

演示

Answer 2

这是获取所有属性并用按钮元素替换原始元素的有效解决方案。对于新元素不需要的属性，可以在“this.specified”条件之后放置一个条件。

    <form action="test.php" action="post">
        <input id="submit" type="submit"  />
    </form>


    <script>
        var oSubmitButton = $('input[type="submit"]');
        var oForm = oSubmitButton.closest('form');
        var sOriginAttrs = '';

        $.each(oSubmitButton[0].attributes, function() {
            if (this.specified) {
                sOriginAttrs += ' ' + this.name + '="' + this.value + '"';
            }
        });

        oSubmitButton.replaceWith($('<button ' + sOriginAttrs + '>').text('Submit').click(function(event) {
            event.preventDefault();

            //Maybe a form submit
            //oForm.submit();
        }));
    </script>

创建了一个小提琴