Об'єкт text: властивості і події

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

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

< script type = "text/javascript" >
document. getElementById("t1"). value = "ім'я"; // 1 спосіб
document.f1.yourName. value = "ім'я"; // 2 спосіб
document.f1.elements[0]. value = "ім'я"; // 3 спосіб
</ script >

Перший варіант є найкращим.

Властивості:

name - відповідає атрибуту name

id - відповідає атрибуту id

value - відповідає поточному значенню об'єкта input тобто поточного вмісту області тексту

type - для даного об'єкта завжди містить значення «text»

Подія onсhange генерується коли текст змінений і фокус переходить на інший об'єкт

Приклад: Є html-сторінка з двома текстовими полями. Необхідно в обробку події onсhange першого поля додати виклик функції, яка в друге текстове поле поміщає текст з першого текстового поля

Виконання:

1. Перший спосіб: Призначення функцій - обробників подій

Скрипт:

< script type = "text/javascript" >
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. Другий спосіб: скрипт в значенні атрибута

< 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 >

ПОДІЯ JAVASCRIPT НАТИСКАННЯМ КЛАВІШІ - ONKEYPRESS

Натискання клавіші на клавіатурі можна зафіксувати за допомогою події onkeypress. Код конкретної натиснутої клавіші може бути ідентифікований за допомогою об'єкта window.event.keyCode

Приклад: Під час введення тексту в текстове поле перевіряти, чи натиснута кнопка «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:

Приклад: Після клацання на текстовому полі виводити в ньому слово «hello».

Виконання:

< input type = "text" onclick = "this.value='hello'" >

function sayHello(a){
a.value = "hello";
}
...

...
< input type = "text" onclick = "sayHello(this)" >
...

У прикладі після клацання на текстове поле викликається функція sayHello (), параметром якої є слово this, тобто як параметр передається сам об'єкт - текстове поле. У функції ж задається значення властивості value для переданого параметра.

Завдання js10_2. Вміст поля перетворювати буквами верхнього регістру, використовуючи подія .tags-text{onChange} і метод toUpperCase (). Використовуйте службове слово javascript this. Приклад виконаний без .tags-text{this}:

Підказки до виконання:

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

function makeUpper() {
document getElementById("first"). value = document getElementById("first"). value. toUpperCase();
}

< input type = "text" id = "first" onchange = "makeUpper()" >

Питання для самоконтролю:

Для чого використовується властивість value текстового поля?
Що означає подія onkeypress?
Для чого використовується службове слово this?