HTML: Come fare un copiabile textarea in sola lettura in iOS-dispositivi

Come faccio a fare un textarea e input type="text"highlightable e copiabile su iOS-dispositivi?HTML: Come fare un copiabile textarea in sola lettura in iOS-dispositivi

Questo non funziona:

<textarea readonly="readonly">Totally readonly, cannot be copied</textarea>

Né fa:

<textarea disabled="disabled">Totally readonly, cannot be copied</textarea>

EDIT: Il testo-area è costantemente aggiornato, in modo da un una tantum trasformazione non lo farà lavoro.

Il contenuto dell'area di testo può anche essere HTML.

Ho un JSFiddle che ho provato questo su: http://jsfiddle.net/sebnilsson/jfvWZ/

fonte

2012-11-13 Seb Nilsson

Si desidera solo impedire all'utente di modificare il testo mantenendolo selezionabile e copiato? – Hejazi

@Hejazi Sì, è corretto! –

È possibile posizionare un pulsante invisibile sul textView che copia il testo o un pulsante accanto ad esso che dice "copia". – AMayes

Una soluzione potrebbe essere quella di trovare tutte le textarea sola lettura sulla pagina e rendere un div con il contenuto al posto del campo di sola lettura. Ho scritto alcuni JS molto semplici per dimostrarlo.

Qualcosa sulla falsariga di

$('textarea[readonly]').removeAttr('readonly').each(function() { 
    var $this = $(this); 
    $this.hide().after('<div data-textarea="' + $this.attr('id') 
     + '" class="textarea">' + $this.val() + '</div>'); 
}).on('textareachange', function() { 
    var $this = $(this); 
    $('[data-textarea="' + $this.attr('id') + '"]').html($this.val()); 
});

sarà anche necessario per attivare l'evento quando si aggiorna il valore textarea. Per esempio

$('textarea').val('test').trigger('textareachange');

C'è un esempio più ampio qui con esempi sul styling ecc

http://jsfiddle.net/ssfUx/3/

fonte

2013-03-20 08:38:31 JohnC

Questo funzionerebbe, se non fosse per un vincolo nel mio problema. Aggiornata la domanda, mi dispiace. –

Ah, ho aggiornato la risposta di cui sopra per soddisfare questo. – JohnC

Se la tua modifica aveva una funzione che non era nello snippet – JohnC

ho successo selezionare del testo sul mio iPhone, ma ha bisogno di molti prova.

<textarea readonly onfocus="this.blur();">Totally readonly, CAN BE copied</textarea>

e l'ultimo: http://jsfiddle.net/jfvWZ/6/

<div> 
    <label>Plain div</label><br /> 
    <div id="plain-div" onFocus="this.blur();"> 
     Plain div 
    </div> 
</div>

facile selezionare il testo su iPhone

fonte

2013-03-20 12:55:36

Aggiornamento di JSFiddle e non funziona su un iPhone 5 con l'ultimo iOS. http://jsfiddle.net/jfvWZ/ Che è possibile copiare da un div non è mai stato un problema. –

Allo stesso modo ha funzionato in questo problema.

Non sono sicuro se quanto segue sia un'alternativa decente, corretta o semantica, ma ha funzionato per me.

Ho semplicemente modificato la textarea in un div in sola lettura, gli stessi stili applicati.

L'unico inconveniente è che in JavaScript non potrei scegliere come target il div con questo ['myForm']. Non sembra essere un figlio dell'elemento modulo in DOM.

Invece ho dovuto ottenere l'elemento da id e impostarlo è innerHTML, piuttosto che impostare il valore come con textarea.

Ha funzionato su Ipad 1 IOS5 e Iphone 4s IOS7 Ora sono in grado di selezionare e copiare il testo negli appunti.

fonte

2014-06-10 09:49:30 user3725405

HTML: Come fare un copiabile textarea in sola lettura in iOS-dispositivi

risposta

Problemi correlati