Событие проблемы с FF - PullRequest
Новая
       10

Событие проблемы с FF

0 голосов
/ 09 апреля 2010

Сделан этот милый маленький скрипт для автоматического изменения полей после ввода. Прекрасно работает в IE, Chrome и Safari, но не в FF или Opera. JS код: 

function fieldChange(id, e){            
            var keyID = (window.event) ? event.keyCode : e.keyCode;
            if (document.getElementById(id).value.length >= 2){
                if (keyID >= 48 && keyID <= 57 || keyID >= 96 && keyID <= 105){
                    switch(id){
                        case "textf1":
                            document.getElementById("textf2").focus();
                        break;                              
                        case "textf2":                              
                            document.getElementById("textf3").focus();
                        break;                      
                        case "textf3":
                            if (document.getElementById(id).value.length >= 4){
                                document.getElementById("nubPcode").focus();
                            }
                        break;                      
                    }
                }
            }

HTML: 

                            <div class="privateOrderSchema">
                                <input type="text" id="textf1" name="textf1" maxlength="2" size="4" onKeyUp="fieldChange('textf1')"/>-
                                <input type="text" id="textf2" name="textf2" maxlength="2" size="4" onKeyUp="fieldChange('textf2')" />-
                                <input type="text" id="textf3" name="textf3" maxlength="4" size="5" onKeyUp="fieldChange('textf3')" />
                            </div>
                            <div class="privateOrderSchema">
                                <input type="text" id="nubPcode" name="nubPcode" size="4" maxlength="4" />
                                <br />
                            </div>

Кто-нибудь знает, как отправить переменную "e" в этом сценарии?

Tnx all: D ur gr8!

Ответы [ 2 ]

0 голосов
/ 09 апреля 2010

Нечто подобное будет работать, я думаю. Он все еще прикрепляет обработчик через атрибуты элементов, что на самом деле нежелательно. Они должны быть прикреплены через JavaScript.

В этой попытке вы отправляете функцию event, this и необязательный идентификатор элемента в функцию fieldChange. Там это довольно хорошо прокомментировано, но вкратце это делается так:

В keyup проверьте длину текущего значения элемента. Если длина равна (или больше) длине, установленной в maxlength, поработайте над магией (если она еще длиннее, обрежьте значение до maxlength). В этой проверке ключей ничего не делайте для кодов клавиш 9 и 16 (это позволяет вкладывать и сдвигать вкладки в «полный» элемент ввода).
«Магия» прыгает к следующему элементу. Это будет либо следующий элемент в форме , либо элемент с id, который был дополнительно отправлен (explicitNextId).

Теперь это 16 строк js, не считая комментариев. НТН. 

<body>
    <form action="#">
        <div class="privateOrderSchema">
            <input type="text" id="textf1" name="textf1" maxlength="2" size="4" onKeyUp="fieldChange(event, this)"/>-
            <input type="text" id="textf2" name="textf2" maxlength="2" size="4" onKeyUp="fieldChange(event, this)" />-
            <input type="text" id="textf3" name="textf3" maxlength="4" size="5" onKeyUp="fieldChange(event, this, 'nubPcode')" />
        </div>
        <div class="privateOrderSchema">
            <input type="text" id="nubPcode" name="nubPcode" size="4" maxlength="4" />
        </div>
    </form>

    <script type="text/javascript">
    function fieldChange(event, elem, explicitNextId) {
        // Obtain useable event
        event = window.event ? window.event : event;            
        var keyCode = event.keyCode, len = elem.value.length;
        // tab, shift (catches shift/tab) or small length, do nothing:
        if (keyCode===9 || keyCode===16 || len < elem.maxLength) {return;}
        // truncate value if exceding limit
        if (len>elem.maxLength) {elem.value=elem.value.substr(0, len-1);}
        // Get the next input to jump to (either from the id explicitly sent, or next in form)
        var next = getNextElement(elem, explicitNextId);
        // If one was found, focus it
        if (next) {next.focus();}
    }
    function getNextElement(elem, explicitNextId) {
        // From explicit id
        if (typeof explicitNextId!=='undefined') {return document.getElementById(explicitNextId);}
        // Get next in form
        var inputs = elem.form.elements;
        for (var idx=0, len=inputs.length-1, candidate; idx<len; ++idx) {
            candidate = inputs.item(idx);
            if (candidate===elem) {return inputs.item(idx+1);}
        }
    }
    </script>
</body>

После полезного комментария от bobince ниже, я изменил некоторые вещи indexOf и Array/slice в функции getNextElement на что-то, что также должно работать в IE.

0 голосов
/ 09 апреля 2010 
onKeyUp="fieldChange('textf1')"

не передает объект event в аргументах. Вместо этого: 

onkeyup="fieldChange('textf1', event)"

Это работает как в IE (потому что event относится к глобальной переменной window.event), так и в других браузерах (потому что event относится к одному локальному аргументу функции, которую вы создаете с помощью обработчика событий on... атрибут).

Теперь вы можете удалить код if (window.event) из функции fieldChange, потому что событие всегда будет передаваться. В тех местах, где вам нужно событие, лучше сначала прослушать аргумент, прежде чем вернуться к IE версия. Типично как: 

function somethingHandler(event) {
    event= event || window.event;
    ...
}

Еще одна вещь, которую вы можете сделать для очистки разметки, это использовать this в обработчике событий: 

onkeyup="fieldChange(this, event)"

теперь fieldChange не нужно искать нужный элемент на id, поскольку у вас уже есть ссылка на него.

Еще лучше - потерять атрибут обработчика событий и сделать его более ненавязчивым. Вы также можете использовать свойство maxLength вместо того, чтобы встраивать логику длины о том, когда именно происходит перефокусировка. eg.:

<input type="text" name="textf1" maxlength="2" class="movetonext" />
<input type="text" name="textf2" maxlength="2" class="movetonext" />
<input type="text" name="textf3" maxlength="4" class="movetonext" />

<script type="text/javascript">
    var elements= document.getElementById('myform').elements;
    for (var i= elements.length; i-->0;)
        if (elements[i].className==='movetonext')
            elements[i].onkeyup= checkMoveToNext;

    function checkMoveToNext() {
        if (this.value.length>=this.maxLength) {
            var elements= this.form.elements;
            var ix= List_indexOf(elements, this);
            ix= (ix+1)%elements.length;
            elements[ix].focus();
        }
    }

    function List_indexOf(list, item) {
        for (var i= 0, n= list.length; i<n; i++)
            if (list[i]===item)
                return i;
        return -1;
    }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...