Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Апрель 2016   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Web-программирование. "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Текстовые элементы. Продолжение."

 

 

На прошлом уроке мы рассмотрели пример с использованием тэга <textarea> -многострочный текст. Сегодня изучим текстовые поля. в отличии от textarea текстовые поля имеют только одну строку текста и задаются они тэгом <input> с атрибутом "text", "password" или "hidden". Сейчас я вам это продемонстрирую. И так, рассмотрим пример:

<html>

    <head>

        <title>Урок 114. Java Script (JS): объекты текстовых элементов</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function ins_tag(tag) {

                var el=document.myform.MyText;

                var text=el.value;

                var beg=el.selectionStart;

                var end=el.selectionEnd;

                if(beg>=0) {

                    el.value=text.slice(0,beg)+"<"+tag+">"+text.slice(beg,end)+"</"+tag+">"+text.slice(end);

                    el.focus();

                    el.selectionStart=beg;

                    el.selectionEnd=end+5+2*tag.length;

                }

            }

        </SCRIPT>

        <form name="myform">

            <input type="text" name="MyText"></input>

            <input type="button" value="Жирно" name="ButtonBold" onClick="ins_tag('B')">

            <input type="button" value="Курсив" name="ButtonEm" onClick="ins_tag('I')">

        </form>

    </body>

</html>

 

По сути, это пример из прошлого урока, но переделанный на простое поле ввода. Работает точно так же:

Web-программирование. "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Текстовые элементы. Продолжение."

 

Если тип сделать "password", то вводимые буковки будет невидно:

 

<html>

    <head>

        <title>Урок 114. Java Script (JS): объекты текстовых элементов</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function on_click() {

                var el=document.myform.MyText;

                var text=el.value;

                if(text=="123") {

                    alert("OK");

                } else {

                    alert("Пароль неверный");

                }

            }

        </SCRIPT>

        <form name="myform">

            Введите пароль: <input type="password" name="MyText"></input>

            <input type="button" value="OK" name="ButtonBold" onClick="on_click()">

        </form>

    </body>

</html>

 

Вот как это будет выглядеть:

Web-программирование. "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Текстовые элементы. Продолжение."

 

Теперь о загадочном значении атрибута hidden. Его применяют, когда текстовое поле показывает не надо но у него может быть значение и оно может оперироваться в программе:

<html>

    <head>

        <title>Урок 114. Java Script (JS): объекты текстовых элементов</title>

    </head>

    <body>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function on_click() {

                var el=document.myform.MyText;

                var text=el.value;

                alert(text);

            }

        </SCRIPT>

        <form name="myform">

            <input type="hidden" name="MyText" value="www"></input>

            <input type="button" value="OK" name="ButtonBold" onClick="on_click()">

        </form>

    </body>

</html>

 

Вот такой будет результат работы данный программы:

Web-программирование. "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Текстовые элементы. Продолжение."

 

 

 

 
В избранное