更改< input>使用支持跨浏览器的jQuery类型 [英] Changing <input> type using jQuery with cross browser support

问题描述

问题

以下脚本完全符合我所需要的，除了IE8以外的所有浏览器中，除去按钮而不替换它与任何东西

The following scripts do exactly what I require, in all browsers tested except IE8, where it removes the button without replacing it with anything.

背景

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

I have been working on a method to replace submit type inputs with image type inputs using jQuery.

首先，我有以下功能与FF和webkit配合使用：

First, I had this following which works with FF and 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（它删除按钮，但不会替换）使用图像），所以我为IE浏览器开发了以下脚本：

But this fails in all 6+ versions if IE (it removes the button, but doesn't replace with image), so I developed the following script for IE browsers:

        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条件过滤流量到适当的脚本，所以整个事情看起来像这样：

I am using HTML Conditionals to filter the flow of traffic to the appropriate script, so so the whole thing looks like this:

<!--[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]>

推荐答案

在IE上， 元素的属性是一次写入。一旦你第一次设置，你不能改变它。 （有关 attr 文档。）

On IE, the type property of the input element is write-once. You cannot change it once you've set it the first time. (There's a warning about this in the attr documentation.)

您唯一与IE兼容的真正选项是实际替换元素与新的元素具有相同的 ID 。显然这对事件处理程序有影响（任何你附加到旧的元素都不会附加到新的元素），所以你可能想使用 委托 （或全球版本 live ），而不是直接将处理程序附加到相关元素。

Your only real option to be compatible with IE is to actually replace the element with a new one with the same id. Obviously this has an impact on event handlers (any you've attached to the old element won't be attached to the new one), so you may want to use delegate (or the global version, live) rather than attaching handlers directly to the element in question.

更新：啊，我看到你已经写了一些代码来做到这一点。该代码的问题是您暂时创建无效的文档（它有两个不同的元素，相同的 id ），然后通过该副本查找元素 ID 。如果您提前获取元素，则会很好：

Update: Ah, I see you've written some code to do that. The problem with that code is that you're temporarily creating an invalid document (it has two different elements with the same id) and then looking up the element by that duplicate id. It'll be fine if you just grab the element in advance:

// 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();

（你不需要这个标记，所以我从上面删除了。 ）

(You don't need the marker for this, so I've removed it from the above.)

但是您可能需要使用 replaceWith ：

But you may want to look at using replaceWith instead:

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

这是一个简化的 replaceWith 示例（还演示代表）：

Here's a simplified replaceWith example (also demonstrating 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：

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 ，但完全正常如果这样做：

The button there doesn't have an id, but it's totally fine if it does:

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：

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，我建议只有一个代码的副本，并在所有的浏览器上使用它。更换元素并不是那么昂贵，即使是在您可以更改元素的浏览器上。

Off-topic: Since you have to replace the element to support IE anyway, I'd recommend just having the one copy of the code and using it on all browsers. It's not that expensive to replace the element, even on browsers that let you change it.

这篇关于更改< input>使用支持跨浏览器的jQuery类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！