Contenteditable vs. înlocuire de intrare

lucrez la o aplicație care va conține o listă a datelor pe care le-ați salvat anterior. dacă aveți o tipografie, nu ați introdus inițial toate punctele de date etc., veți avea posibilitatea de a edita blocul de date.

right now i have JavaScript getting the values of each element (that was created via foreach loop in PHP with data from the server) within a given chunk, saving it to an object and then replacing those elements (

) with textarea inputs then filling it with the data from the JS object that grabbed it previously.

pentru unul am probleme cu evadarea de citate din conținutul dinamic, dar, de asemenea, se simte ca aceasta ar putea să nu fie soluția cea mai elegantă.

in vine contenteditable.

în principiu: ar trebui să fac acest traseu și să fac fiecare element din mulțimea de date contenteditable = 'true' la apăsarea butonului "editați" sau este prea pescuit cu suport pentru browser?

este cursul meu actual un plan solid?

sau există oa treia (a patra, a cincea, etc.) opțiune?

Mulțumiri!

5

2 răspunsuri

Cu excepția cazului în care aveți nevoie în mod special de utilizator pentru a edita conținutul HTML (sau de a face complexe soparla sintaxa etc), du-te cu soluție de intrare/textarea. Mult mai curat, mult mai ușor și mai ușor de făcut. Contenteditable devine complicat foarte repede și folosind ceva de genul tinyMCE sau similar ar fi probabil un overkill.

5
adăugat
N-aș avea nevoie de ceva aproape la fel de puternic ca tinyMCE. în principiu atunci când utilizatorul face clic pe butonul "editați", trebuie să poată edita textul - pur și simplu text; nu html, nici stil, etc. - în acest moment contenționabil, probabil, nu ar deveni prea complicat. soluția actuală se simte complicată și, cu siguranță, nu pare sau se simte ușoară.
adăugat autor John Blythe, sursa
mmm, puncte bune. Mulțumiri!
adăugat autor John Blythe, sursa
Există încă 3 profesioniști pentru elementul de intrare. Este susținută în browsere mobile, este mai mult recunoscută vizual ca element editabil și nu trebuie să gestionați manual conținutul lipit/împrăștiat de utilizator pentru a dezinstala HTML, care element de intrare se face automat, dar nu este mulțumit. Ultimul este pentru UX, deoarece probabil că veți obține un div/p perversibil inutilizabil dacă utilizatorul copiază un titlu h1 în el de undeva.
adăugat autor zatatatata, sursa
Lucrul cu contenteditable este că se inserează etichete html pe o linie nouă. Diferitele browsere inserează etichete diferite (de ex. '

', '
', '<div>') Vezi detalii aici

adăugat autor Acute, sursa

Dacă ați folosit JSfiddle, știți cât de bine funcționează. Asta folosesc. Puteți utiliza un plugin jQuery pentru a evidenția sintaxa dacă aveți nevoie de ea (Snippet, jquery-syntaxhighlighter).

1
adăugat
Nu mă îngrijorează de lucruri mai interesante cum ar fi evidențierea sau ceva de genul ăsta. simplă schimbare a datelor. va trebui să investighez compatibilitatea contenteditable cu browserele dumber presupun: p
adăugat autor John Blythe, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com

PHP România, Moldova
PHP România, Moldova
173 participanți

Vorbim despre Yii, Laravel, Symphony, MySQL, PgSQL, WP, OpenCart... Pentru confort, opriți notificările. Parteneri: https://ciupacabra.com @js_ro @node_ro @python_ro @seo_ro @Romania_Bot Offtop: @holywars_ro Joburi: @php_job @Grupuri_IT