Как работает этот js-код?

Question

[Cesare Borgia]

Здравствуйте!

Искал код для того, чтобы в поле вводились только цифры, наткнулся на такой - jsfiddle.

Array.prototype.indexOf = Array.prototype.indexOf || function (searchElement) {
        "use strict";
        if (this == null) {
            throw new TypeError();
        }
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) {
            return -1;
        }
        var n = 0;
        if (arguments.length > 1) {
            n = Number(arguments[1]);
            if (n != n) { // shortcut for verifying if it's NaN
                n = 0;
            } else if (n != 0 && n != Infinity && n != -Infinity) {
                n = (n > 0 || -1) * Math.floor(Math.abs(n));
            }
        }
        if (n >= len) {
            return -1;
        }
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) {
            if (k in t && t[k] === searchElement) {
                return k;
            }
        }
        return -1;
}

document.querySelector('#validate').onkeypress = validate;

function validate(e) {
            e = e || event;
            return /[a-z0-9]/i.test(String.fromCharCode(e.charCode || e.keyCode)) 
                    || !!(!e.charCode && ~[8,37,39,46].indexOf(e.keyCode));
}

Пожалуйста, не могли бы вы объяснить мне каждую строчку этого немаленького кода. Буду весьма благодарен!

Answer 1

[Samuel_Leonardo]

В начале определяется метод для массива indexOf(возвращает позицию элемента который мы ищем), по сути является фиксом для ie8-
далее на нажатие клавиши в input прикрепляется функция validate

e = e || event
не все браузеры добавляют аргумент к функции поэтому берем e, иначе event
e.charCode || e.keyCode берем код клавиши по аналогичному методу
String.fromCharCode превращаем в элементарную строку
/[a-z0-9]/i.test () проверяем вхождение символов 0-9 и a-z
иначе
!!(!e.charCode && ~[8,37,39,46].indexOf(e.keyCode))
если нет charCode и Keycode не в массиве [8,37,39,46]
обрабатывает клавиши (Backspace,left arrow,right arrow,delete)

Comments

[Cesare Borgia]

А можно еще кое-что объяснить?
Зачем делается var len = t.length >>> 0;
Что делает !! перед скобками?
И ~ перед массивом?

Answer 2

[Samuel_Leonardo]

t.length >>>0 используется что бы привести t.length в unsigned int 32
(вообще операция >>> правый побитовый сдвиг с заполнением нулями , работает так:
-9 >>> 2 (по осн.10)
= 00111111111111111111111111111101 (по осн.2)
= 1073741821 (по осн.10)
)

!! превращает выражение в boolean тип, работает примерно так:
!!0 === false

~ побитовое НЕ :
9 (по осн. 10)
= 00000000000000000000000000001001 (по осн. 2)
--------------------------------
~9 (по осн. 10)
= 11111111111111111111111111110110 (по осн. 2)
= -10 (по осн. 10)

В данном случае IndexOf возвращает индекс элемента начиная с 0
и если бы использовалось бы обычное не то получили бы
!0 == true
!1 == false
что явно не решает нашей задачи,
а так получаем -1,-2,-3,-4
далее, если нажата клавиша 37 будет следующая ситуация
!e.charcode будет true
true && -2 даст -2
!! (-2 ) получаем true, а значит клавишу обрабатываем

Comments

[Cesare Borgia]

Спасибо, теперь уже понятней!

Answer 3

[NewMax]

Еще как вариант:

<input type="text" onkeyup="this.value = this.value.replace(/\D/g,'');">

Comments

[Cesare Borgia]

Выглядит круто, спасибо! :)

Answer 4

[1001001 111]

Лови с использованием jquery, код намного меньше и понятней

$('#id').bind("change keyup input click", function() {
    	if (this.value.match(/[^0-9]/g)) {
        	this.value = this.value.replace(/[^0-9]/g, '');
   	}
});

Comments

[Сергей Протько]

Этот скрипт работает несколько иначе, и если не брать реализацию indexOf (не понятно зачем) то реализация на vanila.js будет не больше места занимать.