Karakteristikat e dobishme të zonës së tekstit. Drita e pasme blu për zonën e tekstit

Ky artikull bazohet në sa vijon -. Unë jam duke bërë disa rregullime dhe ndryshime në atë artikull, duke ndryshuar rendin për qartësi dhe qartësi, si dhe duke ofruar shembuj të drejtpërdrejtë. Kështu që.

Të gjitha truket e propozuara ndahen në tre grupe: " Cilësimet bazë", "Zgjerimi i mundësive me duke përdorur jQuery" dhe "Zgjidhja e problemit të zhdukjes së tekstit kur klikohet." Le të fillojmë me radhë.

Cilësimet bazë të zonës së tekstit

Hidhini një sy pamjes së ekranit. Ai përfaqëson fushën aktive të zonës së tekstit ( Shfletuesi i Google krom). Ne eliminojmë disa nga mangësitë e tij në një shkallë ose në një tjetër.

Zgjerimi me jQuery

$("textarea").autoResize();

Shtimi i një këndi për të ndryshuar madhësinë e zonës së tekstit. Kjo kërkon jo vetëm vetë jQuery, por edhe UI jQuery. Personalisht, ky locion nuk funksionoi siç duhet për mua. Ndoshta duhet të provoj diçka tjetër Versioni jQuery UI

$("textarea").ridimensionuese();

Zgjidhja e problemit të zhdukjes së tekstit në një zonë teksti kur klikohet

Zgjidhja HTML5 - mbajtës i vendit. Ky atribut në HTML5 do të shtojë tekst gri të çelur në fushën e tekstit të zonës së tekstit (e rëndësishme gjithashtu për futjet e tekstit) që zhduket kur klikoni në zonë. Nëse fusha lihet bosh dhe e bëni atë joaktive, teksti do të shfaqet përsëri. Kjo veti punon në Safari 5, Mobile Safari, Chrome 6 dhe Firefox 4 alpha.

Ndryshimi i zonës së tekstit të sfondit duke klikuar. Për ata që nuk kanë vendmbajtës, mund të luani me sfond. Vendos sfondin për fushë teksti dhe më pas personalizoni kodin e sugjeruar jQuery.

Focus(funksion() ( $(this).css("sfond", "asnjë") ))
.blur(funksion() ( if ($(this).value == "") ( $(this).css("background", "url(image.png) pa përsëritje") ));

Ndryshimi i përmbajtjes së zonës së tekstit me klikim - analog i vendmbajtësit në jQuery. Është mjaft e thjeshtë për t'u bërë.

$("#example-tre")
.data("ShuBlog!", $("#example-tre").text())
.css ("color", "#ff9900")
.fokus(funksioni() (
var $el = $(kjo);
if (this.value == $el.data ("ShuBlog!")) (
this.value = "";
}
})
.blur(funksion() (
nëse (this.value == "") (
this.value = $(this).data("ShuBlog!");
}
});

Sidoqoftë, në artikullin për të cilin kishte një lidhje në fillim, skenari ishte më kompleks dhe kjo është ajo që bëri: kontrolloi nëse atributi mbajtës i vendit dhe në rastin e një përgjigje pozitive, ai krijoi një vendmbajtës për etiketën, dhe në rastin e një përgjigjeje negative, ai krijoi skriptin e treguar pak më lart. Nuk e kuptova vërtet kuptimin e këtyre veprimeve për disa arsye.
Së pari, nëse përdorim jQuery, atëherë çfarë ndryshimi ka se cilën metodë zgjedhim? Nuk mendoj se kjo do të ndikojë në performancën. Dhe së dyti, mbajtësi i vendndodhjes ka tekst gri të çelur, por çka nëse na duhet një ngjyrë tjetër? Në përgjithësi nuk është e qartë. megjithatë skenar i plotë Unë do ta sjell atë.

elementi i funksionitSupportsAttribute(element, atribut) (
var test = dokument.krijojElement(element);
nëse (atribut në test) (
kthehu i vërtetë;
) tjeter (
kthej false;
}
};
$(dokument).ready(funksion())(
if (!elementSupportsAttribute("textarea", "placeholder")) (
$("#example-tre")
.data("Teksti origjinal", $("#example-tre").text())
.css ("color", "#ff9900")
.fokus(funksioni() (
var $el = $(kjo);
if (this.value == $el.data ("OriginalText")) (
this.value = "";
}
})
.blur(funksion() (
nëse (this.value == "") (
this.value = $(this).data("Teksti origjinal");
}
});
) tjeter (
$("#example-tre")
.attr("mbajtës vendi", $("#example-tre").text())
.tekst("");
}
});

8 rreshtat e parë janë një funksion për të kontrolluar ekzistencën e një atributi (çdo). Në rreshtin 10 kontrollojmë nëse atributi mbajtës i vendndodhjes është i pranishëm, dhe nëse jo, ekzekutohen linjat e njohura 11-24, dhe nëse jo, atëherë rreshtat 26-28. Në origjinal, rreshti 28 nuk funksionoi për mua dhe e zëvendësova me një të thjeshtuar - .attr("placeholder", "originalText").

Në përgjithësi, kjo është gjithçka që doja t'ju tregoja sot. Më poshtë është një lidhje me shembuj.

20/06/16 2.4K

Elementi HTML textarea është një fushë për futjen dhe redaktimi i tekstit me shumë rreshta. Përdoret për të futur dhe modifikuar pjesë të gjata të tekstit.

Përmbajtja e këtij elementi përfaqëson vlerën e tij origjinale. Shfaqet në fushën e tekstit pas ngarkimit të një dokumenti ose pasi klikoni butonin e rivendosjes në një formular.

Shembuj

Në shembullin e parë, ne do të krijojmë një formë me një kontroll të zonës së tekstit me të gjitha vlerat e paracaktuara. Ne gjithashtu do të vendosim një atribut mbajtës të vendit me një sugjerim se çfarë lloji të përmbajtjes duhet të futet në fushë. Do të shfaqet kur zona e tekstit të jetë bosh:

Mesazh autorit:

Në shembullin e dytë do të vendosim vlera fillestare si përmbajtja e zonës së tekstit HTML. Do të përdoret për të plotësuar kontrollin menjëherë pas ngarkimit të dokumentit, si dhe pas rivendosjes së formularit.

Ndryshe nga fusha e futjes së tekstit me një rresht, elementi textarea përdor vlerën fillestare si përmbajtje të tij ( në vend të atributit të vlerës):

Redaktoni komentin tuaj:

Përshëndetje! Unë mendoj se e keni gabim të gjithë!

Më pas, ne përdorim atributet cols dhe rows për të specifikuar numrin e karaktereve që mund të shfaqen menjëherë në kontroll. Shfletuesit llogaritin gjerësinë dhe lartësinë e një elementi duke i shumëzuar këto vlera me gjerësinë e karakterit dhe lartësinë e fontit të përdorur.

Gjerësia Hyrja HTML textarea llogaritet në lidhje me gjerësinë e karaktereve të fontit të përdorur. Meqenëse karakteret nuk kanë gjithmonë të njëjtën gjerësi, shfletuesit mund të përdorin metoda të ndryshme për të rrumbullakosur këtë vlerë:

Shto një përshkrim të ri:

NË shembullin e mëposhtëm ne përdorim dy atribute. Ata vendosin kufizime në gjatësinë e tekstit që mund të futet në një zonë teksti. Këto janë minlength dhe maxlength, emrat e tyre flasin vetë.

Gjatësia e minierës kontrollohet vetëm kur dorëzohen të dhënat e formularit, ndërsa gjatësia maksimale kontrollohet nga shfletuesit për t'u siguruar që përdoruesi të mos ketë futur më shumë karaktere sesa specifikohen nga ky atribut.

Atributi maxlength i elementit textarea HTML mbështetet mirë nga shfletuesit, por atributi minlength nuk është:

Redaktoni biografinë tuaj:

Tani përdorim atributin e kërkuar, i cili u prezantua në HTML5. Kur specifikohet ky atribut, shfletuesi nuk lejon që të dhënat e formularit të dorëzohen derisa të plotësohet fusha përkatëse.

Mbështetja e shfletuesit për atributin është e paplotë. Për të ofruar këtë funksion në të gjithë shfletuesit, do t'ju duhet të përdorni skriptet.

Atributet

Atribute të veçanta

plotësimi automatik

I tregon shfletuesit nëse duhet të sugjerojë automatikisht sugjerime kur fut të dhëna për këtë kontroll duke u përpjekur të hamendësojë se çfarë po shkruan përdoruesi. Për të këtij atributi Elementi HTML textarea lejohen dy vlera, ato nuk janë të ndjeshme ndaj shkronjave të vogla:

• në: Shfletuesi duhet të ofrojë sugjerime automatikisht. Ky është standardi;
• joaktiv: Shfletuesi nuk duhet të sugjerojë automatikisht opsione.

Shembull:

Arsyetoni përgjigjen tuaj:

fokusim automatik

Një vlerë Boolean që udhëzon shfletuesin të vendosë fokusin e hyrjes në kontroll pasi dokumenti të ketë mbaruar ngarkimin ose kur hapet një kuti dialogu në të cilën shfaqet kontrolli. Nëse atributi ka vlerën " fokusim automatik", një varg bosh (" "), atëherë kontrolli do të ketë fokusin e hyrjes menjëherë pasi të ngarkohet faqja ose kutia e dialogut.

Shembull:

cols

Gjerësia e elementit të kontrollit, e specifikuar në lidhje me numrin e karaktereve bazuar në gjerësinë e karaktereve të fontit aktual. Për shkak se karakteret nuk kanë gjithmonë të njëjtën gjerësi, shfletuesit mund të përdorin metoda të ndryshme për të rrumbullakosur këtë vlerë.

Vlera e specifikuar në këtë atribut të etiketës textarea në HTML duhet të jetë një numër i plotë më i madh se zero. Nëse vlera mungon ose është formatuar gabimisht, atributit do t'i caktohet një vlerë e paracaktuar prej 20.

Shembull:

Falenderime të veçanta:

diremër

Emri i një fushe të re të krijuar për të përcjellë drejtimin e futjes së tekstit. Ky atribut, i prezantuar në HTML5, i lejon autorët të trajtojnë saktë vlerat e futura në gjuhë me drejtime të ndryshme shkrimi. Për ta bërë këtë, shtoni një fushë të veçantë që plotësohet së bashku me formularin. Emri i fushës do të veprojë si vlera e atributit.

Meqenëse ky atribut HTML i textarea është relativisht i ri, ai nuk mbështetet plotësisht nga shfletuesit. Zhvilluesit duhet të kontrollojnë mbështetjen e shfletuesit kur marrin të dhëna nga ana e serverit.

Shembull:

Kontribuoni me një ide:

me aftësi të kufizuara

Vlera Boolean që tregon nëse është e çaktivizuar këtë element kontroll apo jo. Nëse atributi merr vlerën " me aftësi të kufizuara" ose një varg bosh (""), atëherë kontrolli është i çaktivizuar.

Kontrollet me aftësi të kufizuara janë joaktive kur shfaqet forma, bllokohen nga ndërveprimi i përdoruesit dhe vlerat e tyre ( Nëse ka ndonjë) nuk transmetohen kur dorëzohen të dhënat e formularit.

Shembull:

Një qindarkë për mendimet tuaja:

formë

Vlera e atributit ID të formularit me të cilin lidhet zona e tekstit të hyrjes HTML.

Ky atribut është i ri dhe u prezantua në HTML5. Ndihmon në përcaktimin e pronësisë së kontrolleve në forma të mbivendosura ose të ndara.

Shembull:

Prezantimi:

modaliteti i hyrjes

Tregon se cila metodë e hyrjes është më e përshtatshme për përdoruesit. Janë dymbëdhjetë vlerat e mundshme, jo sensitive:

• fjalë për fjalë: futja alfanumerike e tekstit latin si emrat e përdoruesve, fjalëkalimet, kodet e produkteve, etj.;
• latinisht: futja latine në gjuhën e preferuar të përdoruesit, duke përfshirë mjetet mbështetëse si p.sh mbushje automatike. Projektuar për të transferuar të dhëna nga përdoruesit në një kompjuter. Për shembull, përmes formularit të kërkimit;
• emri latin: futja latine në gjuhën e preferuar të përdoruesit, me disa mjete ndihmëse të përfshira. Të tilla si plotësimi automatik i emrave të sugjeruar nga lista juaj e kontakteve dhe instalim automatik regjistër;
• latinisht-prozë : hyrje për komunikimin njeri me njeri me plotësimin automatik të tekstit të sugjeruar dhe vendosje automatike shkronjat e mëdha në fillim të fjalive;
• full-width-latin: hyrje latine në gjuhën e dytë të përdoruesit, me mbështetje për futjen e karaktereve me gjerësi të plotë dhe komunikimin person me person, si p.sh. plotësimi automatik i tekstit të sugjeruar dhe shkronja e madhe në fillim të fjalive;
• kana: hyrje në kana ose romaji, hyrje standarde në Hiragana, duke përdorur hyrjen e karaktereve me madhësi të plotë me mbështetje për konvertimin në Kanji. Projektuar për të futur tekst në japonisht;
• kana-name : njëjtë si " kana“, por me lidhjen e mjeteve ndihmëse për futjen e emrave të njerëzve nga lista e kontakteve;
• katakana: Hyrja Katakana duke përdorur simbole dhe mbështetje për konvertimin në kanji. Projektuar për të futur tekst në japonisht;
• numerike: Futni numra, duke përfshirë çelësat për numrat 0 deri në 9, duke përdorur simbolin ndarës të mijërave dhe simbolin për numrat negativë. Rekomandohet për elementin e hyrjes numerik;
• tel: Futni numrat e telefonit, duke përfshirë tastet numerike 0 deri në 9, simbolin "#" dhe simbolin "*". Në disa zona lokale kjo vlerë atribut HTML zona e tekstit mund të përfshijë mnemonikë të shkronjave. Rekomandohet për elementin e futjes së numrit të telefonit;
• email: futja e tekstit në vendndodhjen e përdoruesit duke përdorur tastierë për të futur një adresë Email. Për shembull, simbolet "@" dhe ". ". Rekomandohet për elementin e futjes së adresës së emailit;
• url: Futni tekstin në vendndodhjen e përdoruesit duke përdorur tastierë për të futur adresat. Për shembull, karakteret "/" dhe ". "dhe gjithashtu për hyrje e shpejtë pjesë të emrave të domeneve, të tilla si "www." ose ".co.uk". Rekomandohet për kontrollin e hyrjes së URL-së.

Shfletuesit mund të përdorin informacionin e përfshirë në këtë atribut për të ofruar mjete për të ndihmuar përdoruesin në futjen e të dhënave. Për shembull, virtuale tastierat në ekran mund të sigurojë çelësa të veçantë për modalitetin e zgjedhur të hyrjes.

Shembull:

Listoni miqtë tuaj:

gjatesia maksimale

Numri i plotë që tregon shuma maksimale karaktere që mund të përmbajnë vlerën e kontrollit.

Zhvilluesit nuk duhet të mbështeten në atributin maxlength HTML të zonës së tekstit. Përdoruesit mund të jenë në gjendje të dorëzojnë të dhënat e formularit përmes një shfletuesi që nuk e mbështet këtë veçori.

Shembull:

gjatësia e minierës

Një numër i plotë që specifikon numrin minimal të karaktereve që mund të përmbajë vlera e kontrollit.

Zhvilluesit nuk duhet të mbështeten në atributin minlength. Përdoruesit mund të jenë në gjendje të dorëzojnë të dhënat e formularit përmes një shfletuesi që nuk e mbështet këtë veçori.

Mbështetja e shfletuesit për atributin minlength është jashtëzakonisht e dobët. Është më mirë të mos mbështeteni në këtë atribut derisa mbështetja të përmirësohet.

Shembull:

emri

Emri i etiketës textarea në HTML. Ai do të dërgohet nga shfletuesi te mbajtësi i lidhur me përmbajtjen e elementit. Këto së bashku do të korrespondojnë me një çift emër-vlerë që përdoret për të përpunuar të dhënat e formularit.

Shembull:

vendmbajtes

Teksti këshillues që tregon se si duhet të plotësohet fusha ( shembull ose Përshkrim i shkurtër ). Shfletuesit mund të shfaqin përmbajtjen e një atributi në një kontroll edhe pse ai nuk ka asnjë kuptim. Kur përdoruesi fillon të shtypë tekstin e vet, këshilla e veglave duhet të hiqet nga kontrolli.

Shembull:

Lexo vetem

Një vlerë Boolean që udhëzon shfletuesin të parandalojë përdoruesin të ndryshojë vlerën e kontrollit. Nëse atributi ka vlerën " Lexo vetem" ose një varg bosh (""), atëherë përdoruesi është i ndaluar të ndryshojë vlerën në kontroll.

Megjithëse ky atribut nuk lejon modifikimin e vlerave të kontrollit, ai nuk bllokon të gjitha veprimet: përdoruesi do të jetë ende në gjendje të zgjedhë dhe kopjojë tekstin në kontroll.

Shembull:

Skedari "config.cfg":

prisni=24 hyrje=db autostart=po

kërkohet

Një vlerë Boolean që tregon nëse ky kontroll mund të lihet bosh. Nëse atributi ka vlerën " kërkohet" ose një varg bosh (""), atëherë përdoruesi duhet të plotësojë kontrollin për të paraqitur të dhënat e formularit.

Nëse zona e tekstit të hyrjes HTML me atributin e kërkuar nuk plotësohet, atëherë kur përdoruesi përpiqet të dorëzojë të dhënat e formularit, shfletuesi do të hedhë një gabim dhe do të anulojë paraqitjen e të dhënave.

Mbështetja e shfletuesit për atributi i kërkuarështë i paplotë. Zhvilluesit do të duhet të mbështeten në skriptet për të ofruar këtë funksionalitet në të gjithë shfletuesit.

Shembull:

Lini mendimin tuaj:

rreshtave

Numri i rreshtave për t'u shfaqur në kontroll. Nëse teksti brenda kontrollit përmban më shumë linja sesa specifikohet nga atributi, shfletuesi do të shfaqë shirit vertikal lëvizni në mënyrë që përdoruesi të mund të aksesojë përmbajtjen e fshehur.

Vlera e specifikuar në këtë atribut të etiketës textarea në HTML duhet të jetë një numër i plotë më i madh se zero. Nëse vlera mungon ose ka format i gabuar, atëherë atributit do t'i caktohet një vlerë e paracaktuar prej 2.

Shembull:

Falenderime të veçanta:

mbështjell

Një vlerë që i tregon shfletuesit nëse teksti duhet të mbështillet kur dorëzon të dhënat e formularit. Ekzistojnë dy vlera të pandjeshme ndaj shkronjave të vogla të disponueshme për atributin:

• i butë : Teksti nuk do të mbështillet kur dorëzon të dhënat e formularit, por mund të mbyllet kur të jepet. Ky është standardi;
• vështirë : Teksti do të mbështillet kur dorëzohen të dhënat e formularit duke shtuar rreshta të rinj. Në këtë mënyrë gjatësia e tekstit nuk do të kalojë gjerësinë e kornizës.

Ky është një atribut relativisht i ri i zonës së tekstit HTML dhe mbështetja është e paplotë. Zhvilluesit do të duhet të mbështeten në skriptet për të ofruar këtë funksionalitet në të gjithë shfletuesit.

Shembull:

Lista e kodeve:

Ky botim është një përkthim i artikullit “textarea element”, përgatitur nga ekipi miqësor i projektit

Mire keq

Artikulli paraqet disa truke që ndoshta nuk i keni ditur se do t'ju duken të dobishme në zhvillimin tuaj.

1. Një imazh si sfond që zhduket kur futni tekst.

Ju mund të shtoni imazhi i sfondit ashtu si çdo element tjetër. Në këtë rast, stili i paracaktuar për zonën e tekstit ndryshon nga kufiri i trashë 1 px në një kufi të pjerrët. Kjo është e rregulluar tregues i qartë kufiri.

Textarea ( sfondi: url(images/benice.png) qendra pa përsëritje; kufiri: 1px solid #888; )

Imazhi i sfondit mund të ndikojë në lexueshmërinë e tekstit. Prandaj, imazhi i sfondit duhet të hiqet kur merret fokusi dhe të kthehet nëse zona e tekstit mbetet pa tekst. Për shembull, duke përdorur jQuery mund të bëhet si kjo:

$("textarea") .focus(function() ( $(this).css("sfond", "asnjë"); )) .blur(function() ( if ($(this).value == "" ) ( $(this).css("background", "url(images/benice.png) qendër pa përsëritje"); ) ));

2. Vendmbajtësi në HTML5

HTML5 ka një atribut të ri të quajtur placeholder. Vlera e këtij atributi tregohet në element teksti dhe zhduket kur merr fokusin, si dhe kur teksti futet në element.

Mbajtësi i vendndodhjes HTML5 mbështetet në shfletuesit e mëposhtëm: Safari 5, Mobile Safari, Chrome 6 dhe Firefox 4 alpha.

3. Placeholder, HTML5 me mbështetje për shfletues të vjetër që përdorin jQuery

Mënyra më e lehtë për të kontrolluar nëse një atribut mbështetet nga shfletuesi është të kontrolloni duke përdorur javaScript:

Elementi i funksionitSupportsAttribute(element, atribut) ( var test = document.createElement(element); return (atribut në test); );

Më pas mund të shkruani kodin që do të aktivizohet nëse shfletuesi nuk e mbështet atributin mbajtës të vendit.

Nëse (!elementSupportsAttribute("textarea", "placeholder")) ( // Nëse shfletuesi nuk e mbështet atributin, atëherë kodi jQuery ekzekutohet $("#example-tre") .data("OriginalText", $( "#example-three ").text()) .css("color", "#999") .focus(function() ( var $el = $(this); if (this.value == $el. data("OriginalText" )) ( this.value = ""; ) )) .blur(function() ( if (this.value == "") ( this.value = $(this).data("OriginalText" ); )) .tekst( ""); )

4. Hiqni goditjen e zonës së tekstit

Shfletuesit në motorët e uebkit, si dhe FireFox 3.6, përshkruajnë zonën e tekstit kur ka fokus. Ju mund ta hiqni këtë skicë duke përdorur veçorinë e përshkrimit css për shfletuesit e uebkit. Për FireFox, përdorni veçorinë -moz-appearance, ose thjesht mund ta vendosni elementin në një kufi ose sfond.

Textarea ( skicë: asnjë; -moz-appearance: asnjë; kufi: 1px solid #999; /* vendosja e kësaj vetie do të heqë gjithashtu skicën në FireFox */ )

5. Ndalimi i ndryshimit të madhësisë

Shfletuesit e uebkit shtojnë një element vizual në zonën e tekstit në këndin e poshtëm djathtas që ju lejon të ndryshoni madhësinë e zonës së tekstit. Nëse dëshironi të hiqni këtë veçori, atëherë duhet të përdorni veçorinë e mëposhtme css:

Textarea (ndrysho madhësinë: asnjë; )

6. Shtimi i aftësive të ndryshimit të madhësisë

jQuery UI ju lejon të shtoni aftësi për ndryshimin e madhësisë në textarea. Kjo funksionon për të gjithë shfletuesit, dhe për shfletuesit e ueb-kit ajo anulon sjelljen e paracaktuar. Për të përdorur këtë veçori, duhet të lidhni jquery.ui dhe të shkruani kodin e mëposhtëm:

$("textarea").ridimensionuese();

7. Ndrysho madhësinë për t'iu përshtatur përmbajtjes

James Padolsey shkroi një skenar të dobishëm jQuery që ju lejon të ndryshoni madhësinë automatikisht të një zone teksti për t'iu përshtatur përmbajtjes së saj. Duket sikur kjo shtojcë nuk është më e disponueshme, por ju mund ta përdorni këtë, për shembull. Shtojca përmban shumë cilësime, por mënyra më e lehtë për ta përdorur atë është:

$("textarea").autoResize();

8.Nowrap

Për të shmangur mbështjelljen e fjalëve në rreshta të rinj, të gjithë elementët përdorin veçorinë CSS të hapësirës së bardhë, e cila nuk funksionon me zonën e tekstit. Për zonën e tekstit duhet të përdorni atributin wrap.

9. Heqja e shiritave të lëvizjes në IE

IE tregon një shirit lëvizës vertikal për të gjitha zonat e tekstit. Ju mund t'i fshehni ato duke përdorur overflow: hidden , por në këtë rast nuk do të shfaqet kur përmbajtja zmadhohet. Prandaj, është më e saktë të përdoret metoda e mëposhtme:

Textarea (mbushje: automatik; )

Në këtë rast, shiriti i lëvizjes nuk do të shfaqet kur i gjithë teksti vendoset në zonën e tekstit, por do të shfaqet nëse është e nevojshme.

Ju mund të shihni shembuj për artikullin.