Valoare: setați valoarea textarea la jQuery. Puteți adăuga dinamic o zonă de text elegantă

Acum lucrez la programarea serverelor în PHP și, din când în când, îmi ies din cap și mă aprofundez în aspect, stiluri și JavaScript. Recent m-am confruntat cu sarcina de a schimba înălțimea zonei de text atunci când introducem comentarii la diferite obiecte. Pe Internet a existat destul de mult material din această unitate, ca să spunem așa. Prima privire a fost concentrată pe implementarea de soluții în domenii atât de grozave precum VKontakte, Facebook, My Circle. Cu toate acestea, la oră nu exista niciun semn de compatibilitate între browsere și era departe de a fi compatibil între browsere.

Opțiuni pentru rezolvarea problemei:
* derulați pe Power SrollHeight și offsetHeight
* calculați numărul de rânduri vikory prin analizarea textului
* sau vikoristuvat ideea din descrierile masurii mai mari.

Opțiunea rămasă a fost această decizie. Pentru zona de text, se creează o minge invizibilă (div) cu aceeași lățime, font, dimensiune font, umplutură, modificări ulterioare, textul este copiat în bila invizibilă, se determină înălțimea mingii și această înălțime este setată pentru zona de text. Sună simplu, dar au existat câteva capcane în procesul de implementare.
Implementarea exactă se bazează pe versiunea prototip 1.7 și anterioară (puteți înlocui cu JQuery sau utilizați întregul cadru).

Dimensiune automată TextArea Demo

funcția resizeArea(text_id, minHeight, maxHeight)
{
var area = $(text_id);
var area_hidden = $(text_id + "_hidden");
var text = "";
area.value.replace(/[]/g, "_").split("\n").each(funcție(i) (
text = text + "" + s.replace(/\s\s/g, " ") + " "+"\n";
});
area_hidden.innerHTML=text;
var înălțime = area_hidden.offsetHeight + 15;
inaltime = Math.max(minInaltime, inaltime);
inaltime = Math.min(maxHeight, inaltime);
area.style.height = înălțime + „px”;
}

corp, zona textului (
familie de fonturi: Tahoma, Arial, "Nimbus Sans L", sans-serif;
dimensiunea fontului: 13px;
}
.text(
latime:700px !important;
chenar: 1px solid #000;
}
.text .textarea_behavior(
chenar:0;
latime:99%;
word-wrap: break-word;
}
.text textarea(
preaplin:ascuns;
}
.text .comment_text_hidden(
poziție: relativă;
}
.text #comment_text_hidden(
vizibilitate:ascuns;
poziție: absolută;
}

Soluția poate fi făcută pentru unii și mai compacte, iar pentru alții chiar mai grozave. Un lucru este sigur, această singură opțiune finală funcționează bine pe toate browserele disponibile (FF, Ch, Op, IE7-9).

Ce este special la abordare: nu poți doar să întrebi textul cât spațiu ocupă textul, așa că plasăm textul acolo, astfel încât să poți afla cât spațiu ocupă efectiv (în versiunea noastră, este doar înălțime) . Axa aici se află în impersonalitatea rocilor subacvatice. Cum să plasați textul într-un div pentru a păstra cu exactitate aspectul textului, liniile în mișcare, etichetele, spațiile - asta este tot ce arată diferit în textul original decât în ​​html. Pur și simplu nu m-am deranjat cu pre-eticheta, pentru că... Părea mai ușor să-l îmblânzești.

În ordine, toate capcanele au fost identificate de mine (nu voi aduce câteva dintre probleme aici, deoarece codul a evoluat și problemele anterioare pur și simplu nu se pot manifesta în acest cod). Introducerea aici elimină problema cu următorul cod:

• Cum să apuci o minge astfel încât să-și păstreze dimensiunea și puterea. Mai mult, nu este posibilă afișarea: niciuna; - ruinați-vă. Nu este posibil să ștergeți blocul ubik (poziție:absolut; stânga: -50000px;), deoarece Dimensiunea blocului nu poate fi specificată, nu este vizibilă în momentul inserării. Soluția poate fi universală și ușor de implementat în orice ocazie.
• Evitați luminițele și rândurile goale.
• Editați etichetele fără a modifica textul.
• Transferarea textului fără întrerupere.

Cele mai comune soluții la aceste probleme sunt bine reprezentate în cod. Mingea este complet înconjurată de o zonă de text, ceea ce vă permite să nu vă gândiți la setarea lățimii mingii. La rând, câteva luminițe vor fi înlocuite cu goluri +. Rânduri goale - (usi retele sociale aduce mai mult vikorism
, dar nu mi-a ieșit). Etichetele pot fi ecranate cu ușurință: simboluri< и >înlocui cu _. Ei bine, cel mai bun lucru pentru mine este să rup textul continuu cu stiluri de împachetare a cuvintelor: break-word;
Ei bine, cel mai important lucru în această idee este o nouă îmbunătățire a stilurilor mingii și a zonei de text.

Puține alte abordări 1. Bazați-vă pe puterea controlului răsucit și a decalajului - prima opțiune pe care am implementat-o. Ar fi în regulă, cu excepția faptului că modificarea dimensiunii zonei de text nu va funcționa aici.

2. Calculați numărul de rânduri victorioase analizând textul. Altă opțiune. Acest lucru este și mai bine, dar așa cum era clar, puteți pur și simplu să setați tipul de font Monospace în text, unde toate caracterele au aceeași lățime. Numai în acest fel se poate obține precizia normală. Cu toate acestea, este important să respectați planurile designerilor.

Vă voi da codul pentru aceasta (parte a funcției resizeArea):

Var linecount = 1;
area.value.split("\n").each(funcție(i) (
linecount += Math.floor(s.length / cols) + 1;
})
area.rows = linecount;

Rândurile sunt importante și se adaugă rânduri lungi. De asemenea, trebuie să cunoașteți parametrul cols - a cărui axă o cunoașteți și este imposibil fără fontul Monospace. Dacă potriviți literele W și i, atunci rândul va fi complet diferit.

Rezultat Rezultatul muncii Vikon a fost îmbunătățit. Funcționează cu FF, Ch, Op, IE7-9. Sper că vei fi maro. După ce am implementat multe opțiuni diferite, mi-am dorit foarte mult să rulez un test unitar pe toate browserele.

Întocmit de: Oleksandr Golovko Data publicării: 23.09.2010

Zavdannya

Schimbați designul zonei de text, implementați un model elegant de defilare verticală.

Vimogi

• ușurința integrării
• compatibilitate între browsere
• apropiere maximă de textul original
  • bazat pe zona de text primară
  • reacție standard la atribute nume, id, dezactivat
  • vizualizarea scroll-ului care este ajustat, derulând cu mouse-ul
  • Opțional, este posibil să schimbați dimensiunea zonei de text țintă în orice browser (cum ar fi Safari și Chrome)
• când javascript este activat, zona de text originală se pierde

Implementarea

Pentru a finaliza sarcina, a trebuit să ne „facem prieteni” forțat cu trei plugin-uri. Tse autoResize(La naiba, James Padolsey!), jScrollPaneі Interfața de utilizare redimensionabilă.

Așa s-a născut cuText 0.9.

Cap de abilitate. Verificat de:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3
• Chrome 6

Ce să descarci?

• autoresize.jquery.js(3,77 Kb) - plugin de autoresize
• Interfața de utilizare redimensionabilă(27,41 Kb) - nu trebuie să utilizați această opțiune deoarece nu este nevoie de funcția de redimensionare a textului
• jScrollPane.js(22,62 Kb) original modificat.
• jquery.mousewheel.min.js(2,6 Kb) pentru a accepta derularea mouse-ului.
• cuText.js(1,98 Kb) pluginul în sine.
• cuText.css foi de stil.

Pornire rapidă

Bibliotecile care trebuie conectate:

... și foaia de stil:

Vă rugăm să rețineți că în codul HTML există o zonă de text:

Inițializam pluginul cuText, de exemplu, astfel:

jQuery(function())( jQuery("textarea").cuText(); ));

Asta e tot.

Și acum raportul

Funcția cuText(), care oferă inițializare, poate accepta următorii parametri:

Parametrii cuText() Aplicații de inițializare

Pentru toate câmpurile cu clasa cuText, puteți modifica dimensiunea:

jQuery(funcție())( jQuery(".cuText").cuText((redimensionabil: adevărat)); ));

Câmp cu id="cuText" cu posibilitatea de a schimba dimensiuni, dimensiuni minime, fără săgeți de defilare, lățime întunecată 12px:

jQuery(function())( jQuery("#cuText").cuText(( redimensionabil: true, scrollbarWidth: 12, showArrows: true, minWidth: 200, minHeight: 100 )); ));

Design: design și dimensiune

Puteți inițializa pluginul cu parametrul redimensionabil: true numai pentru acele zone de text pentru care nu a fost selectată întreaga imagine de fundal (în aplicația demo sunt incluse toate câmpurile cu excepția celui de-al șaselea). Chiar și atunci când redimensionați întregul lucru, nu se va întinde și aspectul va arăta urât. Nu prea îmi pasă de acest schimb, deoarece redimensionarea în sine este implementată în zonele de text de bază doar în unele browsere. nu un standard.

Mai multe despre *.js, care este conectat.

Vă rugăm să utilizați jquery pentru aplicația demo, care include încă 5 fișiere js cu o dimensiune totală de 60 Kb. Motivul pentru aceasta este dieta, cum îți poți schimba dieta? Este posibil. Pluginul jquery-ui-1.8.custom.min.js este necesar doar pentru că este necesar pentru ca utilizatorii să poată schimba dimensiunea textelor elegante. Dacă această funcție nu este necesară, nu ezitați să eliminați acest plugin.

jScrollPane.js și jquery.mousewheel.min.js sunt responsabile pentru stilul de defilare. Evident, deoarece este deja inclus în proiect (și numiți-l astfel, dacă sunt selectate stiluri de zonă de text, apoi selectați, de regulă, stilizări), atunci aceste fișiere sunt deja incluse.

Astfel, setul minim de fișiere care sunt incluse suplimentar este autoresize.jquery.js și cutext.js cu un total de 5,75 Kb.

Lista de surse de alimentare tipice Cum să o configurați aspect exterior zona de text?

Aspectul exterior al zonei de text elegant este definit în cutext.css. Pluginul împachetează automat zonele de text în . Practic, aceste stiluri indică tipul de câmp:

CuTextWrap( width:400px; background:none; color:#000; padding:3px 3px 10px 3px; /* deschiderea de jos este mai mare - spațiul este rezervat pentru tăierea de redimensionare */ border:1px solid #B2B2B2; -webkit-border -radius: - moz-border-radius: 4px; border-radius: 4px; poziție: relativă; * textarea cob înălțime */ afișare: bloc; overflow: ascuns; chenar: niciunul; fundal: niciunul; culoare: #000;

Cum să personalizați stilurile de defilare?

Fragmentele de defilare sunt formate folosind pluginul suplimentar jScrollPane, apoi ajustarea funcționează așa cum este descris în articol jScrollPane. Robimo frumos defilare. Toate stilurile necesare sunt adăugate la cutext.css.

Și folosesc deja aspectul meu jScrollPane. De ce nu va exista un conflict de stiluri?

Nu voi. Stilurile pentru zona de text au fost furate, deoarece cutext.css are toate regulile (de exemplu, .cuTextWrap .jScrollPaneContainer).

Folosesc deja aspectul jScrollPane. Și descrierea pluginului spune „jScrollPane.js (22,62 Kb) originalul a fost schimbat”. Cum se rezolvă această situație?

Ok, nu e mare lucru. Originalul s-a schimbat doar puțin și poate fi modificat pentru defilarea inițială.

JScrollPane.js original are următoarele rânduri:

Comutare (e.keyCode) (cazul 38: //up currentArrowDirection = -1; currentArrowInc = 0; whileArrowButtonDown(); currentArrowTimerArr = setInterval(whileArrowButtonDown, 100); return false; caz 40: 0;whileArrowButtonDown(); currentArrowButtonInterval(); (whileArrowButtonDown, 100);return false;

Acest cod, printre altele, blochează clicul pe săgețile sus și jos. return false nu permite mutarea cursorului în mijlocul zonei de text. Aceste săgeți mișcă pur și simplu scroll. JScrollPane.js modificat are pur și simplu return true acolo.

Pluginurile jScrollPane, autoresize și jQuery UI::resizable au o serie de ajustări subtile de comportament. Nu am atins lista de parametri cuText, dar vreau să-i vikorizez! Yak buti?

Deci, ei chiar au o mulțime de parametri. Mutarea lor în cuText înseamnă complicarea inutil. De ce ai nevoie? ajustări fine, deschide cutext.js, caută pluginurile de care avem nevoie și adaugă parametrii necesari.

Trebuie să personalizați atributele HTML pentru a seta id-ul textarea, numele, dezactivat, tabindex etc. Ce ar trebui să faceți după descărcarea pluginului?

Așa să fie. În centrul expansiunii va fi aceeași zonă de text, care este practic aspectul în HTML, cu toate atributele sale.

Cum puteți adăuga texturi elegante în mod dinamic?

Este posibil, poate. Doar pentru o zonă de text nou creată va trebui să instalați imediat pluginul. Puteți să-l priviți, de exemplu, astfel (inserați după ce faceți clic pe elementul id="btnCreate"):

JQuery(„#btnCreate”).click(function() ( jQuery(this).after(„zona de text a creațiilor pe script.”); jQuery(this).next().cuText((redimensionabil: true)) ;));

Erori/deficiențe ale pluginului

• Există un număr mare de scripturi care pot fi revizuite la funcționalitatea maximă a pluginului (cu redimensionare). Modul de a combate acest lucru este să lipiți scripturile într-un singur fișier. De exemplu, așa: descărcați cutext-all.min.js(42,8 Kb).

Este și mai ușor dacă câmpul pentru introducerea textului se întinde în funcție de înălțimea textului introdus. În acest scop, în browserele moderne puteți extinde câmpul. Și în această notă, vom vorbi despre cum să faceți acest lucru, astfel încât câmpul textarea să se extindă automat atunci când există mai mult text care poate fi plasat în el.

Opțiunea 1: zonă de text cu extindere automată (în javascript pur)

Poate că nu este mai bine decât o soluție Asta e prima varianta.

Și acesta este trimis direct la codul javascript în sine, care trebuie conectat la html: https://github.com/jackmoore/autosize/blob/master/src/autosize.js

Instalarea este simplă: conectați fișierul la script folosind wp_enqueue_script(). Apoi conectați întinderea la elementul textarea cu una dintre următoarele opțiuni:

// Lista elementelor autosize(document.querySelectorAll("textarea"); // un element autosize(document.querySelector("textarea"); //jQuery elemente autosize($("textarea");

Suport browser:

Chrome Firefox IE Safari iOS Safari Android Opera Mini

da	da	9	da	da	4	?

Opțiunea 2: zonă de text cu extindere automată (plugin jQuery)

Dacă aveți biblioteca jQuery instalată pe site-ul dvs., vă recomand un plugin bun pentru întinderea automată a textului.

Voi împărtăși această versiune scurtă a codului pluginului:

/* * jQuery autoResize (redimensionare automată a zonei de text) * @copyright James Padolsey http://james.padolsey.com * @versiunea 1.04.1 (remediere) */ (function(b)(b.fn.autoResize=function) (f)(var a=b.extend((onResize:function()(),animate:!0,animateDuration:150,animateCallback:function()(),extraSpace:20,limit:1E3),f);aceasta .filter("textarea").each(function())(var d=b(this).css(("overflow-y":"hidden",display:"block")),f=d.height( ) ,g=function())(var c=();b.each(["înălțime","lățime","lineHeight","textDecoration","letterSpacing"],funcție(b,a)(c[ a] =d.css(a)));return d.clone().removeAttr("id"). .css(c).attr("tabIndex","-1").insertBefore(d))( ), h=null,e=function())(g.height(0).val(b(this)).val()).scrollTop(1E4);var c=Math.max(g.scrollTop() ,f) +a.extraSpace,e=b(this).add(g);h!==c&&(h= c,c>=a.limit?b(this).css("overflow-y", "") :(a.onResize.call(this),a.animate&&"block"===d.css(" display")?e.stop().animate((height:c),a.animateDuration, a.animateCallback ):e.height(c))));d.unbind(".dynSiz").bind(" keyup.dynSiz",e).bind("keydown.dynSiz",e).bind(" change.dynSiz ",e)));return this)))(jQuery); // initializare jQuery(function())( jQuery("textarea").autoResize(); ));

După instalarea acestui cod, toate zonele de text sunt întinse automat.

Suport browser:

• IE 6-8
• Firefox 3.5
• Opera 9.5-10
• Safari 3
• Chrome 10

În timpul testării, mi-am dat seama că zona de text este obligatorie pentru a seta puterea CSS a display:block , altfel nu a funcționat nicio animație din plugin ( browser chrome). Prin urmare, adăugând câteva rânduri de cod la plugin, astfel încât să puteți stabili singur această putere. De asemenea, unele browsere au capacitatea de a modifica dimensiunea câmpului manual (într-un mod complicat), pluginul are capacitatea de a fi eliminat și întors. Tom în titlu @versiunea 1.04.1 (remediere)

Versiunea codului pluginului este neremediată: /* * jQuery autoResize (redimensionare automată a zonei de text) * @copyright James Padolsey http://james.padolsey.com * @versiunea 1.04.1 (remediere) */ (funcție($)( $ .fn.autoResize = function(options) ( // Doar câteva detalii abstracte, // pentru a face utilizatorii de plugin fericiți: var settings = $.extend(( onResize: function())( ), animate: true, animateDuration: 150, animateCallback: function()(), extraSpace: 20, limit: 1000 ), opțiuni); dezactivați redimensionarea WebKit: var textarea = $(this).css(("overflow-y":"hidden", display:"block" )) , // Memorează în cache înălțimea originală pentru a fi folosită mai târziu: origHeight = textarea.height() , // Necesită clonare din text, vizualizare de pe ecran: clone = (function())( // Proprietăți care pot afecta spațiul ocupat de caractere : var props = ["height","width","lineHeight","textDecoration" ,"letterSpacing"], propOb = (); // Creați obiect de stiluri de aplicat: $.each(props, function(i, prop)( propOb = textarea.css(prop)); )); // Clonează zona de text reală eliminând proprietăți unice // și se inserează înaintea textarea inițială: return textarea.clone().removeAttr("id").removeAttr(" nume") .css(( poziţia: "absolut", sus: 0 , stânga: -9999 )).css(propOb).attr("tabIndex","-1").insertBefore(textarea); ))(), lastScrollTop = null, updateSize = function() ( // Pregătește clona: ​​​​​clone.height(0).val($(this).val()).scrollTop(10000); / / Găsiți înălțimea din text: var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace, toChange = $(this).add(clone);(lastScrollTop === scrollTop) ( return; ) lastScrollTop = scrollTop; // Verificați limita: if (scrollTop >= settings.limit) ( $(this).css("overflow-y",""); ) // Dezactivați callback: settings.onResize.call (acest lucru) ;// Fie animați, fie aplicați direct înălțimea: settings.animate && textarea.css("display") === "block" ? animate((height:scrollTop), settings.animateDuration, settings.animateCallback) : toChange .height( scrollTop); ); // Leagă evenimentele adecvate de gestionare cu spații de nume: textarea .unbind(".dynSiz") .bind("keyup.dynSiz", updateSize) .bind("keydown.dynSiz", updateSize) .bind("change.dynSiz", . ) ; )); // Lanț: returnează asta; ); )) (jQuery); Ajustarea pluginului

În timpul inițializării pluginului, puteți seta diferiți parametri.

1. Să luăm intrarea de jos, adăugând 20 de pixeli: jQuery("textarea").autoResize(( extraSpace: 0 )); 2. Acțiunea este afișată pe podea în momentul redimensionării și după aceea - ajustarea onResize și animateCallback: jQuery("textarea").autoResize(( // La momentul redimensionării: onResize: function() ( jQuery(this ).css(( culoare: "#666", fundal:"#eee" )); ), // După redimensionare: animateCallback: function() ( jQuery(this).css(( culoare:"#222", fundal :"#fff" )) ; ) )); Totul este ajustat la Redimensionare (funcţie) Funcția este apelată atunci când dimensiunea zonei de text este modificată. Trece obiectul textarea, atunci. Funcția „ce” va avea o zonă de text de lucru. anima (logic) Animația de schimbare a altitudinii este activată. adevărat – activat.
De obicei: adevărat animateDuration (număr) Ora în care durează animația este în milisecunde.
Tipic: 150 animateCallback (funcţie) Sună după ce animația s-a terminat. extraSpatiu (număr) Marginea zonei de text de mai jos este în pixeli.
Pentru curatenie: 20 limită (număr)Înălțimea maximă a zonei de text în pixeli. Derularea va apărea mai rapid.
Tipic: 1000 Opțiunea 3: zonă de text cu extindere automată (vechiul meu script) Avantajele acestei opțiuni pentru modificarea dimensiunii câmpului de comentarii pot fi văzute:

• integrare ușoară cu șablonul;
• înălțime mare;
• fara balega.

O altă opțiune nouă, din 16 ianuarie 2013. După ce am corectat codul, ați corectat eroarea - codul este scris puțin incorect și vă puteți instala imediat computerul. Acum nu mai este nimeni.

/** * Script pentru întinderea automată a câmpului (Textarea) pe verticală. * * Pentru script-ul robot, înălțimea zonei de text nu este de vină, dar este atribuită aspru. * NU este indicat Puterea CSSînălţime. Înălțimea poate fi modificată la min-height:200px; Sau ar fi mai bine să setați înălțimea folosind rows="". * De asemenea, puteți seta înălțimea maximă a extensiei * prin CSS cu max-height:800px; * * Autor: Timur Kamaev - http://site * Versiunea 4.0 */ // personalizare var krVar = ( // atributul id al etichetei textarea textareaId: "comment", // oră de reluare (1000=1sec). repetă : 1000, // Mărește coeficientul când are loc derularea. .textarea.onfocus = KR.doit; KR.textarea.onblur = KR.stop; ), doit: function())( // setează numărul necesar de rânduri KR. textarea.rows = KR.countLines(KR.textarea.value); clearTimeout(KR.timeout);KR.timeout = setTimeout(function())( KR.doit(); ), krVar.repeat); ), oprire: function())( clearTimeout (KR.timeout); ), //funcție pentru alimentarea rândurilor countLines: function(strtocount)( var hard_lines = 0; var str = strtocount.split("\n"); hard_lines = str.length ; var tx = KR.textarea ; var letter_width = tx.clientHeight / tx. * krVar.cof/100;// Lățimea aproximativă a unei litere în pixeli var chars_in_line=tx.clientWidth/letter_width; //câte litere sunt într-un row var lines = 0; var temp = 0; // hard_lines-1 = numărul de elemente din matrice pentru(i=0; i 0) lines += temp; ) return lines + hard_lines; ) ) if(window.addEventListener) window.addEventListener(„încărcare”, KR.init, false); else if(window.attachEvent) window.attachEvent("onload", KR.init);

Instalarea scriptului

Copiați codul de descriere care se află deja în șablonul JavaScript;

Instalare câmpul textarea Puterea CSS min-înălțime (pentru a crea o inferioară minunată);

(inutil limbaj) Dacă nu doriți ca câmpul să fie prea greu, setați puterea CSS la înălțimea maximă;

Cum să inserați scriptul direct în fișier:

Dacă nu aveți un fișier js în șablon, puteți crea unul, copiați codul acolo și apoi conectați fișierul la șablon.

Sau pur și simplu puteți include mai mult cod în fișierul șablon single.php inserând următoarea construcție în fișier:

/* */

Cum se inserează un câmp textzon CSS putere min-înălțime

Opțiunea 1: Deschideți fișierul comments.php și găsiți-l acolo Etichetă HTML textarea și adăugați style="min-height:200px; max-height:700px;" . Arata cam asa:

înălțime maximă: 700px; Este posibil să nu adăugați - aceasta este dozhina maximă, până la care câmpul se va întinde.

Opțiunea 2: Găsiți clasa în fișierul de stil (style.css) care reprezintă câmpul textarea și adăugați min-height:200px la noul CSS; . Dacă există o înălțime de putere: XXXpx , atunci trebuie să o ștergeți.

Există o serie de opțiuni care pot fi numite clasa care corespunde câmpului:

#commentform textarea #respond textarea #comment textarea#comment

acestea. detalii: cum funcționează scenariul

Principiul de funcționare al codului este același: dacă cursorul se deplasează în câmpul de comentarii, umplutura periodică de rând este activată (în fiecare secundă), când cursorul părăsește câmpul, umplutura rândului se oprește. Rândurile se calculează prin însumarea numărului de transferuri explicite de rând (\n) și calculul transferurilor implicite (dacă un rând este transferat pe unul nou din cauza unui defect în lățimea câmpului, acest punct a trebuit să fie luptat pentru o mult timp și plictisitor).

Principala diferență cu cealaltă opțiune este că o tehnologie diferită pentru cultivarea rândurilor și rândurilor este eliminată nu prin apăsarea tastei, ci în fiecare oră, în versiunea noastră 500 de milisecunde (p.s.). Intervalul poate fi mărit pentru a evita galmele. În situațiile în care reglarea înălțimii este afectată de apăsarea butonului, există riscul de deteriorare, mai ales la computerele slabe și cu mâinile ușoare.

Vă rugăm să nu ezitați să întrebați în comentarii!

Metoda vă permite să selectați și să modificați valorile elementelor de formular. Pentru elementele de intrare, valoarea atributului value nu este aceeași; pentru listele de selectare - valoarea elementului selectat (în cazul alegere multiplă- valoarea matricei); Pentru opțiunea textarea, metoda .val() va funcționa direct cu eticheta textarea. Metoda are trei variante:

Rotește atributul valoare al elementului de formular selectat. Dacă sunt selectate un număr de elemente, semnificația va fi preluată de la primul. Fiecare element de formular rotește matricea tuturor valorilor selectate.

atributului valoare i se va atribui o valoare nouVal, pentru toate elementele selectate.

atributului valoare i se va atribui valoarea rotită de funcția de valoare. Funcția este activată pentru elementele de piele selectate. La apelare, îi sunt trecuți următorii parametri: index- pozitia elementului in multime, nouVal- mai exact sensul atributului valoric al elementului.

Aplicați acest wiki:

Respect: Este important de reținut că, folosind metoda .val(), eliminați doar valoarea atributului value din primul element al tuturor selecțiilor. Dacă aveți nevoie de valorile tuturor elementelor, ar trebui să utilizați constructe precum .map() sau .each() .

In ziua

Dacă într-unul dintre câmpurile de text trebuie să scrieți produsele preferate, care vor apărea sub numele „Ciocolată”, clientul este lipsit de respect:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ input( width:240px; margin:3px; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt ~b~gt~Indicați produsele preferate:~lt~/b~gt~~lt~br~gt~ ~lt~input type="text" value="Kovbasa" /~gt~~lt~br~gt~ ~lt~input type="text" value="Ciocolată" /~gt~~lt~br~gt~ ~lt~input type="text" value="Bere" /~gt~~lt~br~gt~ ~lt~input type="text" value="Spaghete" /~gt~ ~lt~div id="state"~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("input:text").val(function(index, x){ if(x != "Шоколад") return "Шоколад лучше чем " + x; else return x; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~!}!}