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

How to convert an input submit element to a button element using JavaScript?

本文关键字：元素 转换 按钮 提交 输入 何使用 JavaScript      更新时间：2023-09-26

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

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

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

var input = document.yourWayOfSelectingIt('maybeAnID');
input.outerHTML = input.outerHTML.replace(/^'<input/, '<button') + input.value + '</button>';

演示

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

    <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>

创建了一个小提琴

相关文章：