更改<输入>使用具有跨浏览器支持的 jQuery 进行输入

Question

问题

以下脚本完全符合我的要求，在除 IE8 之外的所有测试浏览器中，它删除了按钮而不用任何东西替换它。

背景

我一直在研究一种使用 jQuery 将提交类型输入替换为图像类型输入的方法。

首先，我有以下适用于 FF 和 webkit 的脚本：

        marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton');
        jQuery('input#SearchButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/search_button.png').insertAfter(marker);
        marker.remove();

为 IE 浏览器开发了以下脚本：

        marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton');
        new_search = jQuery('<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />')

        jQuery(new_search).insertAfter('input#SearchButton');
        jQuery('input#SearchButton').remove();
        marker.remove();

但是如果 IE （它删除按钮，但不替换为图像），则在所有 6+ 版本中都会失败，所以我 使用 HTML 条件过滤流量到适当的脚本，所以整个事情看起来像这样：

<!--[if IE]>
    <script>

        marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton');
        new_search = jQuery('<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />')

        jQuery(new_search).insertAfter('input#SearchButton');
        jQuery('input#SearchButton').remove();
        marker.remove();

    </script>
<![endif]-->

<![if !IE]>
    <script>

        marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton');
        jQuery('input#SearchButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/search_button.png').insertAfter(marker);
        marker.remove();

    </script>
<![endif]>

Answer 1

在 IE 上，input 元素的 type 属性是一次写入。第一次设置后就无法更改。 （attr 文档中有关于此的警告。）

您唯一真实的与 IE 兼容的选项实际上是用具有相同 id 的新元素替换该元素。显然，这会对事件处理程序产生影响（您附加到旧元素的任何事件都不会附加到新元素），因此您可能需要使用 delegate （或全局版本，live)，而不是将处理程序直接附加到相关元素。

更新：啊，我看到你已经编写了一些代码来做到这一点。该代码的问题在于，您暂时创建了一个无效文档（它有两个具有相同 id 的不同元素），然后通过重复的 id 查找该元素。如果您提前获取该元素就可以了：（

// Get the old search button
old_search = jQuery('input#SearchButton');

// Create the new search button
new_search = jQuery('<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />')

// Insert the new one after the old (temporarily creates an invalid document)
jQuery(new_search).insertAfter(old_search);

// Now remove the old one
old_search.remove();

您不需要为此标记，因此我已将其从上面删除。）

但是您可能想看看使用 replaceWith 代替：

jQuery('input#SearchButton').replaceWith(
    '<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />'
);

这是一个简化的 replaceWith 示例（还演示了 delegate):

HTML:

<div id='container'>
  <p>This button is in the container, and so clicks
    on it will convert it back and forth between
    <code>input type='button'</code> and
    <code>input type='image'</code>.</p>
  <input type='button' value='Click Me'>
</div>
<div>
  <p>This button is <strong>not</strong> in the
    container, and so clicks on it aren't processed.</p>
  <input type='button' value='Click Me'>
</div>

JavaScript:

$('#container').delegate('input', 'click', function() {
  if (this.type === "button") {
    $(this).replaceWith(
      "<input type='image' src='" + imageSrc + "'>"
    );
  }
  else {
    $(this).replaceWith(
      "<input type='button' value='Click Me'>"
    );
  }
});

Live copy

那里的按钮没有 id，但如果是的话那就完全没问题：

HTML:

<div id='container'>
  <input type='button' id='theButton' value="Click Me, I'll Change">
  <br><input type='button' value="Click Me, I Won't Change">
</div>

JavaScript:

$('#container').delegate('#theButton', 'click', function() {
  if (this.type === "button") {
    $(this).replaceWith(
      '<input id="theButton" type="image" src="' + imageSrc + '">'
    );
  }
  else {
    $(this).replaceWith(
      '<input id="theButton" type="button" value="Click Me, I\'ll Change">'
    );
  }
});

Live copy

---

离题：由于无论如何您都必须替换该元素才能支持 IE，因此我建议只保留一份代码副本并在所有浏览器上使用它。替换该元素并不那么昂贵，即使在允许您更改它的浏览器上也是如此。

Answer 2

您无法在 Internet Explorer 中动态更改输入元素的类型。
您必须删除旧的输入并添加新的输入