elastic textarea in larghezza

Felice Gattuso

Utente Attivo
19 Ago 2012
41
0
0
semplice ragazzi... voglio che questa libreria jquery invece di far aumentare la textarea in altezza dovrà farlo in larghezza... qualcuno può aiutarmi a costruire lo script ?

Codice:
function elasticTextArea (elementId){

    /*
     * This are two helper functions, they are delcared here for convinience
     * so we can get and set all styles at once and because they are not available in ext-core
     * only in ExtJs
     */
     
    //available in extjs (not ext-core) as element.getStyles
    function getStyles(el, arguments){
        var ret = {};
        total = arguments.length ;
        for (var n=0; n<total; n++ )
           ret[ arguments[n] ] = el.getStyle(arguments[n]); 
        return ret;
    }
    
    //available in extjs (not ext-core) as Ext.Domhelper.applyStyles
    function applyStyles  (el, styles){
        if(styles){
            var i = 0,
                len,
                style; 
                
            el = Ext.fly(el);                   
            if(Ext.isFunction(styles)) {
                styles = styles.call();
            }
            if (typeof styles == "string") {
                styles = styles.split(/:|;/g);
                for (len = styles.length; i < len;) {
                    el.setStyle(styles[i++], styles[i++]);  
                }
            } else if (Ext.isObject(styles)) {
                el.setStyle(styles);
            }           
        }   
    }
    
    //minimum and maximum text area size
    var minHeight = 12 ;
    var maxHeight = 300 ;

    //increment value when resizing the text area
    var growBy = 3 ;
    
    var el = Ext.get(elementId);
  //get text area width
    var width = el.getWidth();

    //current text area styles
    var styles = getStyles(el, ['padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'line-height', 'font-size', 'font-family', 'font-weight', 'font-style']);

    //store text area width into styles object to later apply them to the div 
    styles.width = width +'px' ;
        //hide the text area scrool to avoid flickering
        el.setStyle('overflow', 'hidden');
      //create the hidden div only if does not exists
        if(! this.div){

            //create the hidden div outside the viewport area
            this.div = Ext.DomHelper.append(Ext.getBody() || document.body, {
                'id':elementId + '-preview-div'
                ,'tag' : 'div'
                ,'style' : 'position: absolute; top: -100000px; left: -100000px;'
            }, true);

            //apply the text area styles to the hidden div
            applyStyles(this.div, styles);


            //recalculate the div height on each key stroke
            el.on('keyup', function() {
                elasticTextArea(elementId);
            }, this);
        }

      //clean up text area contents, so that no special chars are processed
      //replace \n with <br>&nbsp; so that the enter key can trigger a height increase
      //but first remove all previous entries, so that the height measurement can be as accurate as possible
          this.div.update( 
                  el.dom.value.replace(/<br \/>&nbsp;/, '<br />')
                              .replace(/<|>/g, ' ')
                              .replace(/&/g,"&amp;")
                              .replace(/\n/g, '<br />&nbsp;') 
                  );

          //finally get the div height
          var textHeight = this.div.getHeight();
      //enforce text area maximum and minimum size
          if ( (textHeight > maxHeight ) && (maxHeight > 0) ){
              textHeight = maxHeight ;
              el.setStyle('overflow', 'auto');
          }
          if ( (textHeight < minHeight ) && (minHeight > 0) ) {
              textHeight = minHeight ;
          }

          //resize the text area
          el.setHeight(textHeight + growBy , true);
      }
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Come validare textarea con jquery jQuery 0
M Passaggio Valori checbox in textarea Javascript 1
napuleone non si aggiorna textarea in tempo reale Javascript 3
seranto [ASP] Controllare il testo inserito in Textarea Classic ASP 6
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
Cosina Modifica script textarea jQuery 0
C PHP citazione forum <blockquote> in TEXTAREA PHP 2
C [HTML] Stampo contenuto di una variabile in TEXTAREA allineamento HTML e CSS 1
zorro Inserire emoticons in una textarea HTML e CSS 1
zorro Inserire emoticons in una textarea PHP 1
M Come rendere solo lettura campo textarea PHP 2
P problema con textarea PHP 6
L visualizzare i &nbsp; nella textarea PHP 1
C Textarea stampa font personalizzato PHP 5
I contatore caratteri textarea sbagliato Javascript 1
I problema textarea PHP 9
G Lasciare inalterati valori campi textarea e combo box PHP 0
M textarea problema HTML e CSS 1
C Sicurezza Textarea PHP 1
C Lunghezza textarea per stampa PHP 0
L upload + textarea + checkbox in un form multiplo Javascript 7
L preview di una textarea con layout del sito PHP 2
V [risolto] Contatore caratteri stile SMS da una textarea Javascript 6
V [risolto] Aggiungere righe dinamicamente ad una textarea Javascript 4
G Problema lettura textarea da servlet Java 2
M Visualizzare record in una textarea è possibile? PHP 2
S Dividere una textarea PHP 1
asevenx Eliminare spazio vuoto sotto alla textarea di un form HTML e CSS 0
L lanciare query da textarea PHP 3
A controllo su valore da campo textarea non funziona PHP 7
Z Problema invio dati da textarea PHP 2
P convalidare textarea PHP 5
P problemi textarea e gestione check per confermare PHP 5
Sevenjeak Aiuto miglioramento funzione per inserimento BBCode in textarea Javascript 1
S Suggerimenti in textarea che scompaiono al click Javascript 6
C Visualizzare i caratteri accentati e speciali in una textarea Javascript 16
C In una textarea sostituire il carattere \n in <br/> Javascript 14
C Aumentare le dimensioni di una textarea in funzione delle righe presenti. Javascript 13
L recupero testo nella textarea dopo fatto invio per sbaglio PHP 1
S NicEdit - Problemi nel passaggio variabili delle TEXTAREA PHP 6
A Recuperare Cols e rows da Textarea con js Javascript 1
A Limite minimo con countdown textarea Javascript 0
D Abilitare scrollbar su textarea disabled HTML e CSS 0
R select dinamiche che riportano valori in una textarea. Javascript 8
D Problemi textarea Classic ASP 2
SolidSnake4 textarea e javascript HTML e CSS 1
borgo italia textarea: cols & rows Javascript 3
Silen textarea che non si ridimensiona PHP 8
T Imagettftext - testo a capo da textarea PHP 4
T ridefinire una textarea HTML e CSS 0

Discussioni simili