События форм и клавиатуры.

Привожу некоторые события форм на которые реагирует:

  
                          submit --------------- запускается при щелчке по кнопке Отправить( submit)
                          функция submit()       или при нажатии клавиши Enter, пока курсор в текстовом поле.

Подтверждение submit - это событие, когда посетитель подтверждает заполнение формы нажатием кнопки Подтвердить(submit) или клавиши Enter. Когда форма заполнения подтверждена, программа проверяет поля заполнения и при наличии ошибок, то есть какого-то не соответствия с требованиями формы, программа останавливает дальнейшее действие и выдает сообщение причину отказа. Если все заполнено правильно, то форма передается как обычно.

Для выполнения функции сначала выберите форму, только затем применяйте функцию submit()

Как Вы уже знаете простейшим способом выбора элемента является его идентифицирование, то есть присвоение ему имени, например, id="submit". Для форму выбираем тег:

 
                          < input type="text" id="username" size="28" />
                          // с именем id="username".

Кнопку подтверждения выбираем так:

 
                          < input type="submit" name="submit"id="submit" value="Подтвердить" />

Пишем здесь самую простую программу получения имени посетителя, при котором он вводит свое имя и подтверждает данное событие нажатием клавиши или "Enter", при этом, если значение поля ввода есть пустая строка, то выводится сообщение "Введите имя в поле "Имя".":

 
                          < script type="text/javascript">$(document).ready(function(){
                          $('#username').submit(function(){
                          if($('#username').val()== ' ') {
                          alert('Введите имя в поле "Имя".');
                          return false;
                          }
                          });
                          });
                          < /script>
                          < div style=" margin: 20px auto 20px 200px">
                          < label for="username" class="label">Имя< /label>
                          < input type="text" id="username" size="28" />
                          < /div>
                          < div style=" margin: 20px auto 20px 200px">
                          < input type="submit" name="submit"id="submit" value="Подтвердить" />
                          < /div>                         

Тут надо заметить, что составления опросника, формы регистрации или простую форму подтверждения процедура не простая, но весьма трудоемкая и сложная. Поэтому здесь, всего лишь хвостом вильнули для информации. Тема будет отдельно затрагиваться чуть попозже.

                                               
                          reset ---------------- запускается при щелчке на кнопку Отменить( reset)
                          функция reset()        и используется для отмены любых изменений, при котором 
                                                 страница сайта возвращается к первоначальному содержанию.
                                                 ( можно при этом предупредить посетителя, что он собирается
                                                  отменить то что есть).

В принципе не часто, но кнопка Отменить(reset) Вам пригодится, чтобы отменить любые изменения, сделанные в форме. Повторюсь, что событие reset() возвращает страницу сайта в состояние, в котором она находилась на тот момент, когда она была загружена. Например, если пользователь на Вашей странице внес в форму какие-то изменения, Вы легко и просто можете вызвать диалоговое окно с Вашим вопросом: " Вы уверены в том, что хотите отменить сделанные изменения?". И тогда окно даст пользователю возможность нажать кнопку "Нет" и предотвратить обнуления формы.

Примерно в таком виде и напишется коды программы:

 
                           < scripttype="text/javascript">$(document).ready(function(){
                                        $('#reset').reset(function(){
                                        alert(' Вы уверены в том, что хотите отменить сделанные изменения?')
                                        });
                                    });
                           < /script>
                           < div style=" margin: 20px auto 20px 200px">
                           < input type="reset" name="reset" id="reset" value="Нет" />
                           < /div>  
                                                
                          change --------------- запускается при изменении статуса форм, при нажатии 
                          функция change()       переключателя.

Многие поля форм запускают событие change при изменении их статуса. Примером может служить случай, когда кто-нибудь нажимает переключатель или выбирает пунк меню из выпадающего меню. Для того, чтобы Вы были в курсе событий, воспользуйтесь функцией change(), чтобы сразу проверить выбор, сделанный в меню, или на какой переключатель было произведено нажатие.

На практике Вы можете написать функцию change так, чтобы при выборе варианта из меню, изменилось бы пункты другого меню( к примеру, посетитель выбрал товар из первого меню, во втором меню сразу изменились цвета на этот товар, цены и много других параметров на данный вид товара.) Тут ведь много вариантов реализации события change. Самое главное Вы на странице контролируете события происходящие с Вашими тегами выборки. Как воспользоваться полученной информацией, как говорится, потеть и потеть.

                                               
                          focus ---------------- запускается при переходе в текстовое поле при щелчке 
                          функция focus()        кнопкой мыши или клавиши табуляции.

Какая польза от события focus? Даже один пример даст понимания действий функции focus(). Для заполнения формы на странице Вашего сайта курсор устанавливается в текстовое поле формы. Возможно ли сразу поместить текстовый курсор в текстовое поле, не заставляя посетителей совершать лишние щелчки или нажатия, прежде чем начинать вводить текст? Вот, применяя событие focus данную процедуру можно написать.

Чуть выше при вводе имени необходимо было сначало навести курсор на текстовое поле ввода и нажать, только после этого начинать писать свое имя.

Попробуем написать коды программы так, чтобы сразу поле появилось вместе с курсором. Применим событие focus к нашему текстовому полю:

                            < script type="text/javascript">$(document).ready(function(){
                            $('#username').focus();});
                            < /script>
                            < div style=" margin: 20px auto 20px 200px">
                            < label for="username" class="label">Имя< /label>
                            < input name="username" type="text" id="username" size="28" />
                            < /div>

Вот, такая простенькая программа получается, курсор в текстовом поле. Пожалуйста , сразу введите свое имя.

                                                
                         blur ----------------- запускается при выходе из фокуса, используется при 
                          функция blur()         проверке форм

Событие blur является противоположностью событию focus. Запускается во время выхода поля из фокуса ( при нажатии клавиши табуляции или при щелчке кнопкой мыши за пределами поля). Пример тому, когда посетитель вводит свой электронный адрес в текстовое поле и клавишей табуляции перехожит в следующее поле, вот, тогда Вы можете проверить, что написал посетитель, правильный ли электронный адрес. События blur и focus применимы к ссылкам на странице сайта.

Таким образом, событие blur помогает сразу исправить ошибку при вводе ответов и не накапливается до полного оформления полей форм, опросников, регистраций и тому подобных представлений на странице сайта.

                          
                          keypress ------------- запускается при нажатии на клавишу.
                          функция keypress()

Браузеры имеют возможности отслеживать процесс применения посетителями свою клавиатуру при нахождении на странице сайта. Поэтому есть возможность присваивать клавишам команды,таким образом, позваляя посетителю управлять Вами написаннами скриптами так как вам этого надо, когда нажимаются различные клавиши.

Событие keypress запускается в тот момент, когда Вы нажимаете клавишу. При этом, чтобы данное событие keypress сработало, не обязательно отпускать клавишу. Тогда событие keypress запускается снова и снова пока Вы будете удерживать клавишу нажатой.

                         
                          keydown -------------- аналогично keypress, но запускается непосредственно
                          функция keydown()      перед событием keypress. 

При этом не соблюдается кроссбраузерность. Требуется тестирование в разных браузерах.

Повторюсь событие keydown запускается перед самым запуском события keypress. В разных браузерах при удерживании нажатой клавишу события происходят по-разному.

                           
                          keyup ---------------- запускается когда отпускается клавиша.
                          функция keyup()
                          

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед