Изменение типа <input>с использованием jQuery с поддержкой нескольких браузеров - PullRequest
Новая
       26

Изменение типа <input>с использованием jQuery с поддержкой нескольких браузеров

0 голосов
/ 04 мая 2011

Задача

Следующие скрипты делают именно то, что мне нужно, во всех протестированных браузерах, кроме 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();

Но это не работает во всех 6+ версиях, если IE (он удаляет кнопку, но не заменяет изображение), поэтому я разработал следующий скрипт для браузеров 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-условные выражения для фильтрации потока трафика к соответствующему сценарию, поэтому все выглядит так: 

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

Ответы [ 2 ]

6 голосов
/ 04 мая 2011

В 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">'
    );
  }
});

Live copy

Не по теме : Так как вам все равно придется заменить элемент для поддержки IE, я бы рекомендовал иметь одну копию кода и использовать ее во всех браузерах.Заменить элемент не так дорого, даже в браузерах, которые позволяют его изменить.

0 голосов
/ 04 мая 2011

Вы не можете динамически изменять тип элемента ввода в Internet Explorer.Вы должны удалить старый ввод и добавить новый ввод

...