Campuri de Text Input

Curs Flash

Campurile de Text Input sunt zone in care textul poate fi modificat si adaugat de utilizator.
Pentru a crea un camp text input, se foloseste proprietatea "type" a obiectului TextField, cu valoarea "input" (sau valoarea TextFieldType.INPUT).
Campurile Text Input fiind create cu obiectul "TextField", se pot aplica si celelalte proprietati ale acestui obiect, pentru dimensionare, pozitie, formatarea textului si a zonei de text. Cum ar fi, definirea unei borduri, culoare background, setare numar caractere permise sau restrictionare caractere ce pot fi scrise in campul input.

Iata un exemplu cu Text Input (Explicatiile necesare sunt in cod):

// Definire Instanta de obiect TextField
var txt_inp:TextField = new TextField();

// Se aplica proprietati instantei create
txt_inp.x = 100;                   // Distanta fata de marginea din stanga
txt_inp.y = 50;                    // Distanta fata de marginea de sus
txt_inp.width = 100;               // Lungimea campului de text
txt_inp.height = 20;               // Inaltimea
txt_inp.type = "input";            // Seteaza campul de text ca Input
txt_inp.border = true;             // Activeaza afisarea unei borduri
txt_inp.borderColor = 0x0000da;    // Defineste culoarea bordurii

// Permite doar adaugarea de numere si litere mici de la 'a' la 'e'
txt_inp.restrict = "0-9 a-e";

// Setare numar maxim de caractere ce pot si scrise
txt_inp.maxChars = 28;

txt_inp.text = 'Nume';

// Adauga Instanta cu "txt_inp" in prezentarea Flash
addChild(txt_inp);

- Acest cod va afisa urmatoarea prezentare Flash. Daca testati, in campul de text afisat puteti sterge si adauga alt text, dar, comform setarii "txt_inp.restrict = "0-9 a-e";", utilizatorul poate scrie doar numere si litere de la 'a' la 'e'.
- Pentru ca in campul Input sa poata fi adaugate mai multe randuri de text (cu Enter), trebuie aplicata proprietatea multiline, cu valoare true.
- Pentru a face ca zona Input Text sa fie utilizata ca un camp Input pentru parola (caracterele scrise sunt inlocuite cu asterix "*") se foloseste proprietatea displayAsPassword cu valoarea true.
- Ca la orice camp de text creat cu "TextField", acesta poate fi formatat cu proprietatile obiectului "TextFormat".

1. Utilizare TextEvent Input

In general, rolul unui camp de Text Input e acela de a utiliza textul adaugat de utilizator pentru anumite actiuni.
Cu obiectul TextEvent ataugat la "addEventListener()" Flash recunoaste /detecteaza momentul (sau evenimentul) cand utilizatorul scrie ceva in campul Input; poate sa preia caracterul adaugat sau textul din camp, iar in functie de acestea se pot executa diferite instructiuni.
Sintaxa pentru utilizarea obiectului "TextEvent" este urmatoarea:

• camp_txt.addEventListener(TextEvent.TEXT_INPUT, oFunctie);
  function oFunctie(insTxtEv:TextEvent):void
  {
      // Codul care va fi executat
      // cand utilizatorul adauga un caracter in "camp_txt"
  }

- "camp_txt" este instanta "TextField" pt. campul de text Input.
- "addEventListener()" este o metoda ActionScript 3 de recunoastere /detectare a evenimentelor realizate in prezentarea Flash.
- "TextEvent.TEXT_INPUT" este obiectul si cu tipul evenimentului ce trebuie recunoscut si preluat.
- "oFunctie" este functia care va fi apelata /executata cand utilizatorul scrie in campul Input.
- "insTxtEv" este instanta la obiectul "TextEvent" prin care pot fi utilizate (procesate) date preluate.
            - Cu insTxtEv.text se preia ultimul caracter introdus de utilizator in zona de text Input.

Evenimentul nu este expediat la stergerea caracterelor (cu Delete sau Backspace).
- Pentru a preveni /anula adaugarea in campul Input a caracterului tastat de utilizator, dar evenimentul sa fie insa capturat, se foloseste in functia apelata (aici "txtInp()" metoda preventDefault(). Este utila cand, de ex., se doreste afisarea altui cuvant sau caracter in functie de ce e scris.

Iata un exemplu de cod ActionScript 3 prin care se recunoaste momentul cand sunt scrise caractere intr-un camp text Input, si in functie de numarul de caractere adaugate se modifica culoarea bordurii si cea de fundal. Studiati si explicatiile din cod.

// Definire Instanta de obiect TextField
var txt_inp:TextField = new TextField();

// Se aplica proprietati instantei create
txt_inp.x = 100;                   // Distanta fata de marginea din stanga
txt_inp.y = 50;                    // Distanta fata de marginea de sus
txt_inp.width = 100;               // Lungimea campului de text
txt_inp.height = 20;               // Inaltimea
txt_inp.type = "input";            // Seteaza campul de text ca Input
txt_inp.border = true;             // Activeaza afisarea unei borduri
txt_inp.borderColor = 0x0000da;    // Defineste culoarea bordurii
txt_inp.maxChars = 28;             // Numar maxim de caractere permise
txt_inp.backgroundColor = 0xfefe18;     // Defineste culoarea fundal
txt_inp.background = true;              // Activeaza afisare fundal

// Adauga Instanta cu "txt_inp" in prezentarea Flash
addChild(txt_inp);

// Se defineste expresia ce recunoaste evenimentul din campul Input
txt_inp.addEventListener(TextEvent.TEXT_INPUT, txtInp);

// Functia ce va fi apelata de evenimentul setat
function txtInp(txtEvent:TextEvent):void
{
  // Preia numarul de caractere din "txt_inp"
  var nr:int = txt_inp.text.length;

  // Defineste efectuarea unor comenzi in functie de nr. de caractere
  // Schimbare culoare bordura si daca "nr>6" adauga background
  if(nr<3) txt_inp.borderColor = 0xda0000;
  else if(nr<5) txt_inp.borderColor = 0x00da00;
  else if(nr>5) txt_inp.backgroundColor = 0xe8e8fe;
}

- Daca adaugati acest cod intr-un document Flash nou, va rezulta urmatoarea prezentare: - Vedeti rezultatul adaugand mai multe caractere in campul de text (se va modifica culoarea bordurii si la urma culoarea de fundal).

Pentru a preveni /anula adaugarea in campul Input a caracterului tastat de utilizator, dar evenimentul sa fie insa capturat, se aplica in functia apelata (aici "txtInp()"), la obiectul cu evenimentul transmis (aici "txtEvent"), metoda preventDefault() (de ex., txtEvent.preventDefault();). Este utila cand, de ex., se doreste afisarea altui cuvant sau caracter in functie de ce se scrie.
- Pentru a adauga mai multe campuri de text input, trebuie creata cate o instanta cu "TextField" pt. fiecare Input.

2. Evenimente FocusEvent - FOCUS_IN, FOCUS_OUT

In afara de evenimentul creat la adaugarea de caractere, se pot efectua diferite actiuni si pentru momentele cand utilizatorul da click /intra pe un camp Text Input (FOCUS_IN) sau iese din el (FOCUS_OUT), utilizand evenimentele FocusEvent (FOCUS_IN si FOCUS_OUT).
Metoda este similara cu cea prezentata mai sus, pentru "TextEvent"

Studiati urmatorul exemplu si explicatiile din cod. Aici este definita o functie prin care pot fi usor definite mai multe campuri de text input, apoi se scriu expresiile pt. preluarea evenimentelor FocusEvent si functiile ce vor fi apelate de acestea.

// Functie pentru creare campuri Text Input
// Preia ca argumente: instanta, distanta Y si text
function setInput(inst, dy, txt):void
{
  // Se aplica proprietati instantei primite "inst"
  inst.x = 100;                   // Distanta fata de marginea din stanga
  inst.y = dy;                    // Distanta fata de marginea de sus
  inst.width = 100;               // Lungimea campului de text
  inst.height = 20;               // Inaltimea
  inst.type = "input";            // Seteaza campul de text ca Input
  inst.border = true;             // Activeaza afisarea unei borduri
  inst.borderColor = 0x0000da;    // Defineste culoarea bordurii
  inst.maxChars = 28;             // Numar maxim de caractere permise
  inst.backgroundColor = 0xe8e8e8;     // Defineste culoarea fundal
  inst.background = true;         // Activeaza afisare fundal
  inst.text = txt;                // Textul initial afisat in Input

  // Adauga Instanta in prezentarea Flash
  addChild(inst);
}

// Functia pt. FOCUS_IN
function setFIn(focus:FocusEvent):void
{
  // Defineste culoare bordura si background pt. campul tinta (target)
  (focus.target as TextField).borderColor = 0x00da00;
  (focus.target as TextField).backgroundColor = 0xfefe08;
}

// Functia pt. FOCUS_OUT
function setFOut(focus:FocusEvent):void
{
  // Defineste culoare bordura si background pt. campul tinta (target)
  (focus.target as TextField).borderColor = 0xfe0000;
  (focus.target as TextField).backgroundColor = 0xe7e8fe;
}

// Definire prima si a doua Instanta de obiect TextField
var txt_inp1:TextField = new TextField();
var txt_inp2:TextField = new TextField();

// Setare pt. recunoastere evenimente FocusEvent (FOCUS_IN si FOCUS_OUT), pt fiecare instanta
txt_inp1.addEventListener(FocusEvent.FOCUS_IN, setFIn);
txt_inp1.addEventListener(FocusEvent.FOCUS_OUT, setFOut);
txt_inp2.addEventListener(FocusEvent.FOCUS_IN, setFIn);
txt_inp2.addEventListener(FocusEvent.FOCUS_OUT, setFOut);

// Apelare functie "setInput" pt. definirea campurilor la fiecare instanta TextField
setInput(txt_inp1, 50, 'Input 1');
setInput(txt_inp2, 80, 'Input 2');

- Acest cod afiseaza 2 campuri de Text Input. Cand se da click pe unul din ele (oricare) se schimba culoarea lui de fundal si a bordurii (dupa cum e setat in functia "setFIn()"), iar cand se iese din acel camp se modifica din nou acele culori (dupa cum e setat in functia "setFOut()"). Puteti testa si vedea in prezentarea urmatoare.
- Fisierele FLA cu exemplele din aceasta lectie pot fi descarcate de la:

1. Creare camp Text Input
2. Utilizare TextEvent Input
3. Utilizare FocusEvent - Input

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.