Я изучил HTML и CSS некоторое время назад, заинтересовался этой областью и начал изучать продвинутые программирование в JavaScript (третье издание). Я учился в эти дни и только что узнал содержание событий и сценариев форм. Несколько дней назад учитель попросил меня написать кусок кода: в форме JavaScript используйте клавишу Enter и перемещающиеся клавиши вверх и вниз влево и вправо, чтобы переместить фокус из одного текстового поля в предыдущее или следующее текстовое поле. Я пытался написать код, используя знания, которые я узнал до сих пор. Я столкнулся с несколькими трудностями в письменной форме: расчет модуля; Используйте это и аргументы, чтобы найти событие триггера внутри функции; Используйте метод addHandler (), чтобы добавить обработчики событий в событие. С помощью учителя я решил вышеупомянутые проблемы. Я чувствовал, что узнал много знаний через этот код, поэтому я написал комментарий после того, как разобрался и опубликовал его.
Кода -копия выглядит следующим образом:
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> </title>
</head>
<тело>
<форма>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "отправить"> </div>
</form>
<Скрипт>
функция is_down (e) {
var isdown;
E = E || window.event;
Switch (e.keycode) {
Случай 13: // введите ключ
Случай 39: // переместить ключ вправо
Случай 40: // Переместить ключ
isdown = true;
перерыв;
Случай 37: // переместить ключ влево
Случай 38: // перемещение вверх ключ
isdown = false;
перерыв;
}
возврат - это;
}
function key_up () {
// При вызове функции сама функция будет генерировать это и аргументы
// Использовать это и аргументы, чтобы найти поле и запустить события соответственно
var e = аргументы [1];
return is_down (e) === не определен? true: harder_element (это, is_down (e));
}
функция handle_element (поле, is_down) {
var elements = field.form.elements;
for (var i = 0, len = elements.length-1; i <len; i ++) {
if (field == elements [i]) {
перерыв;
}
}
i = is_down? (i + 1) % Len: (i - 1) % Len;
// (0 === I && is_down) -> Нажмите клавишу вниз после того, как последнее текстовое поле
// (-1 === I &&! Is_down)-> Нажмите клавишу UP после того, как первое текстовое поле сфокусировано
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
вернуть истину;
}
Элементы [i] .focus ();
var element_arr = ['кнопка', 'отправить', 'сбросить', 'select-one', 'textarea'];
if (element_arr.join (','). Indexof (elements [i] .type)> -1)
Элементы [i]. Select ();
вернуть ложь;
}
// Cancel Введите событие формы подачи по умолчанию
document.onkeydown = function (e) {
E = E || window.event;
if (e.keycode == 13) {
e.preventdefault? e.preventdefault (): (e.terurnvalue = false);
}
};
// распознавать addEventListener и AttachEvent (т.е.) в браузерах
функция addHandler (элемент, тип, обработчик) {
if (element.addeventlistener)
element.addeventListener (тип, обработчик, false);
иначе if (element.attachevent)
element.attachevent ("on" + тип, обработчик);
еще
element ["on" + type] = Handler;
}
var elements = document.forms [0] .Elements;
for (var i = 0, len = elements.length; i <len; i ++) {
// Добавить обработчик событий key_up для события Keyup
addhandler (элементы [i], "keyup", key_up);
}
</script>
</body>
</html>
Выше всего содержимое кода. Я лично чувствую, что письмо довольно полное, и все, что следует учитывать, обрабатывались. Я надеюсь, что всем понравится.