Come ridimensionare un'area di testo flessibile su un dispositivo mobile?

Question

Su un computer, è facile per ridimensionare una textarea, come questo:

<textarea> 

http://jsfiddle.net/sssdpepa/

è sufficiente fare clic e trascinare la cosa nell'angolo in basso a destra. Ma su dispositivi mobili, non riesco a ridimensionare la stessa area di testo. C'è qualcosa che mi manca? O devo aggiungere le funzionalità di ridimensionamento mobili separatamente in qualche modo?

Answer 1

Non penso che possa ridursi, la modifica di righe/colonne in CSS non cambia il suo aspetto. Puoi renderlo più grande (usando le proprietà sopra) e impostarlo in base alle dimensioni dello schermo. Vedi:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

La maggior parte dei browser per dispositivi mobili non supportano la proprietà CSS resize - che è la cosa che dà textareas si ridimensiona-grado.

Partenza quali browser supporto ridimensionamento: http://caniuse.com/#search=resize

Non c'è modo semplice per "aggiungere il ridimensionamento mobile". Immagino che potresti ancora farlo in modo hacky, ma altamente sconsigliato. La logica sarebbe probabilmente simile a questa:

1. Set resize:none.
2. Utilizzare HTML + CSS + un img (SVG) per creare una piccola scheda di ridimensionamento in basso a destra.
3. Utilizzare JS per ascoltare gli eventi di trascinamento (potrebbe essere necessaria una libreria di eventi tocco personalizzati) nella scheda di ridimensionamento.
4. Logica listener:
   • Aumentare l'altezza dell'elemento in base alla distanza di trascinamento se il trascinamento è verso il basso, ma non aumentare oltre l'altezza massima CSS/stile.
   • Diminuisce l'altezza dell'elemento in base alla distanza di trascinamento se il trascinamento è verso l'alto, ma non diminuisce oltre l'altezza minima CSS/stile.
   • Analogamente, aumentare la larghezza se il trascinamento è a destra, ma non aumentare oltre la larghezza massima impostata.
   • Analogamente, diminuire la larghezza se il trascinamento è a sinistra, ma non diminuire oltre la larghezza minima impostata.
   • Se l'elemento genitore è fisso larghezza/altezza, non lasciare che l'utente ridimensioni oltre le dimensioni genitore.
   • Se il genitore ha larghezza/altezza automatica, potrebbe essere necessario regolare le posizioni di scorrimento di conseguenza se la variazione della dimensione dell'elemento dovesse superare i bordi del genitore. (Potrebbe anche essere necessario eseguire alcuni test sul campo per osservare se la modifica della vite di scorrimento dell'elemento genitore/scrollLeft aumenta il rilevamento del trascinamento).

Tutto sommato, direi che non vale la pena di implementare sul cellulare. Probabilmente è anche meglio non consentire il ridimensionamento sui dispositivi mobili, considerando lo spazio limitato dello schermo. Per quanto riguarda i browser IE/Edge, attendi che le specifiche del modulo CSS siano finalizzate e MS probabilmente la implementerà.

Answer 3

È possibile utilizzare ridimensionare proprietà per area di testo che funziona correttamente in tutti i browser tranne IE. Per rendere compatibile con tutti i browser è possibile utilizzare sotto il plug-in dell'interfaccia utente Jquery per ottenere lo stesso risultato.

http://jqueryui.com/resizable/

Answer 4

È possibile utilizzare la libreria jQuery UI touch Punch (http://touchpunch.furf.com)

jQuery UI touch Punch è un piccolo hack che consente l'utilizzo di eventi touch su siti che utilizzano il libreria dell'interfaccia utente di jQuery UI.