Невозможно перейти к действию формы в IE и Edge при использовании изображения типа ввода - PullRequest
Новая
       43

Невозможно перейти к действию формы в IE и Edge при использовании изображения типа ввода

0 голосов
/ 10 января 2019

При использовании ввода изображения с атрибутом formaction внутри формы в IE и Edge, нажатие на входное изображение не приводит к переходу к указанному внешнему URL-адресу formaction. Если вы сейчас просматриваете этот вопрос в Chrome и запускаете приведенный ниже фрагмент кода, он правильно откроет веб-сайт Apache. Однако если вы снова откроете эту страницу в Edge, вы обнаружите, что нажатие на кнопку не работает. Однако, если вы измените тип ввода для отправки, все работает нормально. Кто-нибудь знает, почему это происходит или это где-то задокументировано? 

<form method='POST' id='loginForm'>
  <input type='image' formaction='https://apache.org' src='http://apache.org/images/SupportApache-small.png' height='20%'  />
</form>

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

Хотя ОП специально не запрашивал решение, только для объяснения / документации, я выкладываю обходной путь (используя jquery), на случай, если кто-то придет сюда в поисках одного: 

$(document).ready(function ($) {
  $('form').submit(function () {
    var btn = $(this).find("input[type=image]:focus");
    if (btn.length == 1) {
        this.action = btn[0].formAction;
    }
  });
}
0 голосов
/ 11 января 2019

Я сделал тест с вашим кодом, и мне удалось создать проблему. Похоже, в IE и MS Edge возникли проблемы с форматированием в типе ввода Image.

Обходной путь - удалить форматирование из изображения и поместить его в форму, как показано ниже. 

<!doctype html>
<head>
</head>
<body>
<form method='POST' id='loginForm' action="https://apache.org">
  <input type='image'  src='http://apache.org/images/SupportApache-small.png' height='20%'  />
</form>
</body>
</html>

Вывод в IE:

enter image description here

Аналогичный вывод вы получите в MS Edge и других браузерах.

...