C’è un modo per rendere parzialmente modificabile un’area di testo? (rendere modificabili solo parti del testo)

Mi sono appena imbattuto in una situazione in cui sarebbe stata una soluzione elegante avere solo parti di un’area di testo (precedentemente caricate con testo) modificabili mentre altre parti non lo sono (“in grigio”, per così dire).

Questo è ansible usando javascript in generale?

Vorrei usare jQuery.

Potresti farlo (solo un’idea delineata, nessun codice):

Definisci un’espressione regolare che corrisponda all’intero testo. Usa le stringhe fisse per le parti non modificabili e usa [\s\S]*? per le parti modificabili. Usa ^ e $ per ancorare la tua espressione regolare.

 /^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/ 

Ora reagisci all’evento keyup e probabilmente anche ad altri eventi (come paste ).

Con ogni evento rilevante, verifica se la regex corrisponde ancora.

In caso contrario, annulla l’evento.

In pratica, questo dovrebbe interrompere le modifiche alle parti che sono letterali nella regex e quindi rendere certe parti del tuo testo di sola lettura.

Non dimenticare di testare la stringa sul lato server anche dopo il post del modulo – non fidarti mai che il client non possa inviare valori non validi.


MODIFICARE

Puoi usare una funzione di regex preventivo per build dynamicmente la regex dalle stringhe, questo dovrebbe farti risparmiare un sacco di problemi.

 function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") } 

uso

 var re = new Regex( "^" + [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?") + "$" ); 

Se si utilizza un elemento textarea semplice, non sarà ansible creare lo stile del contenuto richiesto (in base al fatto che il contenuto sia modificabile o meno). Nella migliore delle ipotesi, potresti verificare se il contenuto che l’utente sta tentando di modificare si trova nella lista nera o nella lista bianca e quindi interrompere la modifica o meno di conseguenza. Potresti anche fornire un feedback visivo come un messaggio di avviso che dice “non puoi farlo”.

La mia raccomandazione sarebbe quella di sfruttare l’attributo contenteditable , che potrebbe richiedere un po ‘più di tempo per lo stile, ma ti consentirà una maggiore flessibilità a lungo termine.

Sarai in grado di disegnare un elemento div in modo che assomigli alla tua textarea richiesta, quindi utilizzare span modificabili all’interno di esso per impostare se un particolare blocco di testo può essere modificato o meno. È quindi ansible utilizzare i comandi JavaScript (fare riferimento al collegamento sopra) o utilizzare un pulsante “salva” per recuperare questo contenuto, impostarlo come valore per la propria area di testo (che si potrebbe avere nascosto) e inviare di nuovo la pagina normalmente.

Utilizzare il seguente codice come esempio approssimativo.

 
This is some editable content which will quickly be followed by some non-editable content

Beh, potresti fare qualcosa del genere. Questo codice è molto inefficiente, sto solo cercando di delineare il concetto.

JS:

 $(function () { var tb = $("#t").get(0); $("#t").keydown(function (event) { var start = tb.selectionStart; var end = tb.selectionEnd; var reg = new RegExp("(@{.+?})", "g"); var amatch = null; while ((amatch = reg.exec(tb.value)) != null) { var thisMatchStart = amatch.index; var thisMatchEnd = amatch.index + amatch[0].length; if (start <= thisMatchStart && end > thisMatchStart) { event.preventDefault(); return false; } else if (start > thisMatchStart && start < thisMatchEnd) { event.preventDefault(); return false; } } }); }); 

HTML

  

Questo usa la tua idea di "marcatori". L'idea generale è di dire ok, l'intervallo di testo che l'utente sta tentando di modificare all'interno di uno dei nostri marcatori? Ovviamente, usando una regexp ogni volta che viene premuto un tasto non è il modo migliore per determinarlo, non sto ignorando le frecce, ecc. Ecc. Ma questo ti dà un'idea generale.

Idea interessante, ma purtroppo il testo all’interno dell’area di testo deve essere trattato in modo uniforms, ovvero non è ansible disabilitare una sottosezione del contenuto dell’area di testo.

Hai opzioni, tuttavia. Se è ansible identificare il testo che deve essere distriggersto, è ansible aggiungerlo come elemento DOM (ad esempio un div), quindi posizionarlo in modo che implichi che si trovi all’interno dell’area di testo.

Puoi suggerire che questo div è all’interno dell’area di testo sia facendo grande l’area del testo che usando la posizione: stili relativi / assoluti per spostare il div sull’area di testo. Oppure, puoi rimuovere il bordo dell’area di testo e metterlo su un contenitore che contiene anche il testo div w / “disabled”.

Suggerirei, piuttosto che provare a suddividere il contenuto di un input in sottostringhe di contenuto modificabile / non modificabile, utilizzare l’attributo contentEditable di un elemento HTML e utilizzare JavaScript per passare quel valore modificato in un input nascosto altrove nella pagina

In un elemento genitore, puoi impostare il bordo su 1px grigio fisso e poi all’interno di questo, inserisci il

1) textarea (modifica il css per non avere il bordo) 2) etichetta (no border pure)

In questo caso, sembrerà che entrambi i testi all’interno 1) e 2) siano insieme poiché sono posizionati in una scatola. 1) È modificabile mentre l’altro è distriggersto.

Suggerirei due textareas uno di sola lettura e un altro modificabile, sovrapponendolo in modo che sembri il suo unico