JavaScript урок10. Объектная модель документа (продолжение): идентификация текстового поля в javascript

Авторadmin / Опубликовано

На уроке рассматриваются способы доступа к текстовым полям в javascript, свойство value и события onchange текстового поля. Разбирается служебное слово javascript this

Назад
К оглавлению
Далее к уроку 11

Объект text: свойства и события

<form name="f1">
Ваше имя:<br>
<input type="text" name="yourName" id="t1">
</form>

Текстовое поле идентифицируется тремя способами:

1
2
3

document.getElementById('t1').value="Имя";
document.f1.yourName.value="Имя";
document.f1.elements[0].value="Имя";

Первый способ является предпочтительным.

Свойства:
name — соответствует атрибуту name
id — соответствует атрибуту id
value — соответствует текущему значению объекта input т.е. текущему содержимому области текста;
type — для данного объекта всегда содержит значение «text»

Событие onсhange генерируется когда текст изменен и фокус переходит на другой объект

Пример 1: Имеется html-страница с двумя текстовыми полями. Необходимо в обработку события onсhange первого поля добавить вызов функции, которая во второе текстовое поле помещает текст из первого текстового поля

Выполнение:

  1. Первый способ: Назначение функций — обработчиков событий

    2. Скрипт:

    <sсript>
function myFunc() {
 document.getElementById("second").value = document.getElementById("first").value;
}
</script>
    <body>
<input type='text' id='first' onchange='myFunc()'>
<input type="text" id='second'>
  2. Второй способ: скрипт в значении атрибута
    3. <input type='text' id='first' 
onchange='javascript: document.getElementById("second").value=document.getElementById("first").value;'>
<input type="text" id='second'>
Задание js10_1. Создать страницу проверки знаний учащегося с текстовым полем и вопросом: «Сколько бит в 1 байте?». Осуществить проверку правильности введенного в текстовое поле ответа (выдавать сообщение). Функцию проверки запускать по щелчку кнопки. Дополните код:

Подсказки к выполнению:

Скрипт:

function check(){
 if(...) {...}
 else {...}
 }

html-код:

<body>
<form action="" method="get" name="my">
Сколько бит в 1 байте?
<input type="text" id="answer" size="3"><br>
<input name="b1" type="button" onClick="..." value="Проверить">
</form>

Объяснение данного задания можно просмотреть на видео:
youTube

Событие javaScript нажатие клавиши — onkeypress

Нажатие клавиши на клавиатуре можно зафиксировать с помощью события onkeypress. Код конкретной нажатой клавиши может быть идентифицирован с помощью объекта window.event.keyCode

Пример 2: При вводе текста в текстовое поле проверять, нажата ли клавиша «d». Если нажата, заменять текст в текстовом поле на «нажата d». Использовать событие javaScript onkeypress

Замечание: буква d имеет код 100 

<input id="txt1" onkeypress="if(window.event.keyCode=='100') document.getElementById('txt1').value='нажата d'">

Служебное слово в javaScript this

this в javascript заменяет обращение к текущему объекту. Текущим объектом в данном случае является объект, в котором описан код.
Рассмотрим пример использования в javascript this:

Пример 3: По щелчку на текстовом поле выводить в нем слово «hello».

Выполнение:

  1. <input type="text" onclick="this.value='hello'">
  2. function sayHello(a){
  a.value="hello";
}
...
    ...
<input type="text" onclick="sayHello(this)">
...

В примере по щелчку на текстовое поле вызывается функция sayHello(), параметром которой является слово this, т.е. в качестве параметра передается сам объект — текстовое поле. В функции же задается значение свойства value для переданного параметра.

Задание js10_2. Содержимое поля преобразовывать буквами верхнего регистра, используя событие onChange и метод toUpperCase(). Используйте служебное слово javascript this. Пример выполнен без this:

Подсказки к выполнению:
Выполнение БЕЗ служебного слова this:

function makeUpper() { 
document.getElementById("first").value=document.getElementById("first").value.toUpperCase();
}
<input type='text' id='first' onchange="makeUpper()">

Выполнение задания со служебным словом this смотрите на видео:
youTube

Вопросы для самоконтроля:

  • Для чего используется свойство value текстового поля?
  • Что обозначает событие onkeypress?
  • Для чего используется служебное слово this?
Назад
К оглавлению
Далее к уроку 11