Задать вопрос
@gelosoft
Frontend-developer
javascript

В IE 8 не могу при onsubmit (JS) изменить значение поля перед отправкой. В чем проблема?

Есть такая страница, форматирующая ввод 16 цифр (с 1234567890123456 на 1234 5678 9012 3456). При отправке формы форматирование должно исчезнуть и просто передать цифры. В других браузерах работает нормально, но в IE (в частности в 8) значение поля не заменяется перед отправкой. В чем может быть проблема?

<form name="nameForm" method="POST">
    <input type="text" name="nameInput">
    <button type="submit">Send</button>
</form>

<script>
    (function () {
        var el = document.getElementsByName('nameInput')[0];
        var frm = document.forms['nameForm'];

        if (el.addEventListener) {
            el.addEventListener("input", callbackKeydown, false);
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', callbackKeydown);
        }

        if (frm.addEventListener) {
            frm.addEventListener("submit", callback, false);
        } else if (frm.attachEvent) {
            frm.attachEvent('onsubmit', callback);
        }

        function callbackKeydown(e) {
            var valueOriginal = (e.propertyName === 'value') ? e.srcElement.value : this.value;
            var valueWithoutSpaces = valueOriginal.replace(/\D/g, '');
            var length = valueWithoutSpaces.length;
            var valueWithSpaces = valueWithoutSpaces.substr(0, length < 4 ? length : 4)
                    + ((length > 4) ? ' ' + valueWithoutSpaces.substr(4, length < 9 ? length - 4 : 4) : '')
                    + ((length > 8) ? ' ' + valueWithoutSpaces.substr(8, length < 12 ? length - 8 : 4) : '')
                    + ((length > 12) ? ' ' + valueWithoutSpaces.substr(12, length < 16 ? length - 12 : 4) : '');
            if (e.propertyName === 'value' && e.srcElement.value != valueWithSpaces) {
                var input = e.srcElement;
                input.value = valueWithSpaces;
                input.blur();
                input.focus();

            }
            else {
                this.value = valueWithSpaces;
            }
        }

        function callback(e) {
            var v = el.value.replace(/\D/g, '');
            el.value = v;
            alert(el.value);
            return true;
        }
    }())
</script>

</html>
  • Вопрос задан
  • 2647 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
@gelosoft Автор вопроса
Frontend-developer
Проблема в следующем....

На текстовом поле висит обработчик (для ie на propertychange, для остальных на input). В обработчике формы на submit происходит изменение этого текстового поля. Для всех браузеров кроме IE (я так понимаю <=8) срабатывает только обработчик формы и форма отправляется, а в IE (горячо любимый) еще и вызывается обработчик текстового поля перед отправкой. В принципе по моему мнению IE наверно все-таки правильно поступает, как бы мне это не нравилось)))
Решилось удалением обработчика тестового поля перед изменением поля в обработчике submit'а.

Последняя версия:
<html>
<body>
<form name="nameForm">
    <input type="text" name="nameInput" onfocus="this.value = this.value"/>
    <button value="submit" type="submit">Send</button>
</form>

<script>
    (function () {
        var el = document.getElementsByName('nameInput')[0];
        var frm = document.forms['nameForm'];

        if (el.addEventListener) {
            el.addEventListener("input", callbackInput, false);
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', callbackInput);
        }

        if (frm.addEventListener) {
            frm.addEventListener("submit", callbackForm, false);
        } else if (frm.attachEvent) {
            frm.attachEvent('onsubmit', callbackForm);
        }

        function callbackInput(e) {
            var valueOriginal = (e.propertyName === 'value') ? e.srcElement.value : this.value;
            var valueWithoutSpaces = valueOriginal.replace(/\D/g, '');
            var length = valueWithoutSpaces.length;
            var valueWithSpaces = valueWithoutSpaces.substr(0, length < 4 ? length : 4)
                    + ((length > 4) ? ' ' + valueWithoutSpaces.substr(4, length < 9 ? length - 4 : 4) : '')
                    + ((length > 8) ? ' ' + valueWithoutSpaces.substr(8, length < 12 ? length - 8 : 4) : '')
                    + ((length > 12) ? ' ' + valueWithoutSpaces.substr(12, length < 16 ? length - 12 : 4) : '');
            if (e.propertyName === 'value' && e.srcElement.value != valueWithSpaces) {
                var input = e.srcElement;
                input.value = valueWithSpaces;
                input.blur();
                input.focus();
            }
            else {
                this.value = valueWithSpaces;
            }
        }

        function callbackForm(e) {
            if (el.detachEvent) {
                el.detachEvent('onpropertychange', callbackInput);
            } else {
                el.removeEventListener('input', callbackInput, true);
            }
            el.value = el.value.replace(/\D/g, '');
        }
    }())
</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
VovanR
@VovanR
Фронт-энд Вэб-разработчик
Нет возможности проверить, но тут stackoverflow.com/questions/16201278/jquerys-form-... пишут, что можно кнопке добавить атрибут value="submit"
Или можно на сабмит вызывать событие click кнопки отправки формы.
Ответ написан
3 комментария
3 комментария
Aliance
@Aliance
Есть подозрение, что проблема в том, что ИЕ отправляет данные до того, как вызываются всякие методы, их изменяющие. Возможно, нужно явным образом прерывать дефолтное поведение события, выполнить изменения данных, и вручную воспроизвести событие. Схема примерно такая (псевдо js):
function callback (e) {
   e.preventDefault();
   // ...
   // действия с данными формы, удаление пробелов и прочего
   // ...
   form.submit();
}
Ответ написан
12 комментариев
12 комментариев
RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
День добрый! Надеюсь вы проверяете код непосредственно на xp с браузером ie8? Или же в эмуляторе(или в самом ie поставили совместимость с ie8) пытаетесь запустить скрипт? Проверьте работает ли js вообще? Если нет то в настройках браузера включите разрешить использовать js на этой странице.
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы