Как сделать так, чтобы INPUT TYPE = "IMAGE" не передавался при входе в WebKit? - PullRequest
3 голосов
/ 16 ноября 2010

В приложении C # / ASP.NET у меня есть форма, которая выглядит примерно так (плюс еще много, но это важно):

<form method="post" action="">
<input type="image" name="ctl15" src="cancel.gif" style="border-width:0px;" />
    <!-- Server side, the above input is a System.Web.UI.WebControls.ImageButton. -->
...more extra fluff...
<input type="submit" name="Button1" value="Proceed" id="Button1" class="button"
    style="width:59px;" />
</form>

Эта форма прекрасно работает в Internet Explorer и Firefox, но не работает в браузерах на основе WebKit (Safari и Chrome). Проблема в том, что когда пользователь нажимает Enter, когда в поле ввода, а не с помощью мыши нажимает на кнопку отправки, ввод изображения активируется (что в этом случае соответствует событию отмены, в точности противоположному «продолжить»). "действие, которое является естественным, учитывая рассматриваемый интерфейс).

Я хочу, чтобы при нажатии клавиши Enter активировать кнопку <input type="submit"> вместо <input type="image">, не прерывая отправку, щелкнув изображение. Как я могу это сделать? Желательно в кросс-браузерной манере, поэтому мне не нужно больше особых случаев в коде.

Никаких решений jQuery, пожалуйста, так как это приложение не использует его (и представить совершенно новую библиотеку для такой «простой» вещи будет очень трудно продать) - хотя фондовый JavaScript прекрасно работает. Очевидно, что лучше всего было бы сделать это только с помощью HTML и CSS, но я сомневаюсь в целесообразности этого.

По сути, этот вопрос мне кажется как бы полной противоположностью HTML: Отправка формы нажатием клавиши ввода без кнопки отправки .

К сожалению, поскольку различные части пользовательского интерфейса отображаются разными классами и хранятся в отдельных файлах .aspx (в частности, <input type="image"> находится в одном месте, а <input type="submit"> в совершенно другом), переупорядочивание элементов в сгенерированный HTML на самом деле не является возможным решением.

1 Ответ

1 голос
/ 16 ноября 2010

Чистый JavaScript:

<script type="text/javascript">
var SUBMIT_BUTTON_ID = "Button1";
window.onload = function(event) {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oCurInput = arrInputs[i];
        if (oCurInput.type == "text") {
            oCurInput.onkeypress = function(evt) {
                if (typeof evt == "undefined" || evt == null)
                    evt = window.event;
                var keyCode = evt.keyCode || evt.which;
                if (keyCode == 13) {
                    document.getElementById(SUBMIT_BUTTON_ID).click();
                    return false;
                }
                return true;
            }
        }
    }
}
</script>

Протестировано на IE8 и Chrome, лучше тестируйте на всех браузерах, которые вы считаете актуальными, прежде чем его использовать.

Этот код будет обрабатывать все события onkeypress для всех текстовых полей вдокумент и при нажатии клавиши ВВОД имитирует нажатие кнопки отправки и отменяет дальнейшую обработку события, чтобы избежать конфликтов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...