使用跨浏览器支持的jQuery更改<input>类型

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(它删除按钮,但不替换为图像),则所有6个版本都会失败,因此我为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();

我正在使用HTML Conditionals来过滤到适当脚本的流量,所以整个事情看起来像这样:

<!--[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上,元素的type属性input是一次写入.第一次设置后,您无法更改它.(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'>"
    );
  }
});

实时复制

那里的按钮没有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">'
    );
  }
});

实时复制

偏离主题:因为你必须更换元素以支持IE,我建议只使用一个代码副本并在所有浏览器上使用它.即使在允许您更改元素的浏览器上,替换元素也不是那么昂贵.