Codifiche e Trasformazioni
Affrontiamo il problema di codificare i caratteri in HTML/Javascript
Definiamo una stringa magica: A<br>\n/d'e"f?g!h&€àèéìòùZ che può dare problemi a seconda di dove la si usi
Questa in HTML può essere scritta come:
A<br>\n/d'e"f?g!h&€àèéìòùZ
oppure
A<br>\n/d'e"f?g!h&€àèéìòùZ
In JavaScript la valorizziamo come: MagicString = "A<br>\\n/d'e\"f?g!h&€àèéìòùZ";
In JSON la valorizziamo come: {"Valore":"A<br>\\n/d'e\"f?g!h&€àèéìòùZ"}
In un campo di input o in una textarea la valorizziamo con l'istruzione Elemento.value = "A<br>\\n/d'e\"f?g!h&€àèéìòùZ";
Attraverso una funzione JavaScript la stringa magica è stata valorizzata nei 3 elementI sottostanti.
Guardiamo adesso come rendere editabile un paragrafo monoriga
Questo è il paragrafo che vogliamo rendere editabile e che contiene: A<br>\n/d'e"f?g!h&€àèéìòùZ
Guardiamo adesso come rendere editabile un paragrafo multiriga
Questo è il paragrafo che vogliamo rendere editabile e che contiene:
A<br>\n/d'e"f?g!h&€àèéìòùZ
A<br>\n/d'e"f?g!h&€àèéìòùZ
Per far questo abbiamo utilizzato la funzione:
function FunEditaParagrafo(Id, NoReturn) { let Paragrafo = document.getElementById(Id); if(Paragrafo == null) { return; } if(NoReturn) { Paragrafo.addEventListener('keydown', (event) => { // Non voglio poter inserire un return if (event.key === 'Enter') { event.preventDefault(); } }); } if(Paragrafo.isContentEditable) { Paragrafo.contentEditable = false; } else { Paragrafo.contentEditable = true; } Paragrafo.focus(); }
Guardiamo adesso come trasformare un paragrafo in textarea e viceversa
Questo è il paragrafo che vogliamo rendere trasformare e che contiene:
A<br>\n/d'e"f?g!h&€àèéìòùZ
A<br>\n/d'e"f?g!h&€àèéìòùZ
Per far questo abbiamo utilizzato le funzioni:
function Trasforma(ParId, TxtAId) { if(document.getElementById(ParId) != null) { TrasformaInTextarea(ParId, TxtAId); } else { TrasformaInParagrafo(TxtAId, ParId); } } function TrasformaInTextarea(ParId, TxtAId) { let Paragrafo = document.getElementById(ParId); if(Paragrafo == null) { return; } let Textarea = document.createElement("textarea"); Textarea.id = TxtAId; Textarea.value = Paragrafo.textContent; Textarea.rows = 4; Textarea.cols = 80 Paragrafo.replaceWith(Textarea); Textarea.focus(); } function TrasformaInParagrafo(TxtAId, ParId) { let Textarea = document.getElementById(TxtAId); if(Textarea == null) { return; } let Paragrafo = document.createElement("p"); Paragrafo.id = ParId; let TestoHtml = HtmlEncode(Textarea.value); TestoHtml = TestoHtml.replaceAll("\n", "<br>"); Paragrafo.innerHTML = TestoHtml; Textarea.replaceWith(Paragrafo); Paragrafo.focus(); }