Come limitare il numero di caratteri nella text area di Chronoform V4

Come limitare il numero di caratteri nella text area di Chronoform V4

  • Blog
  • Letto 2132 volte

Un Cliente l’altro giorno mi ha chiesto di inserire un form nel sito web che gli sto realizzando. Poi mi ha chiesto se era possibile limitare il numero di caratteri nella text area. E che ci vuole, ho detto io! Tanto uso Chronoform! Poi però ho perso tutta una giornata per capire come si faceva…

Ecco come procedere

1. Create una Text Area e fate attenzione che la field name e la fied ID coincidano
2. Cliccate sul nome del form e alla riga Form Wizard Mode mettete AVANZATO (io infatti uso sempre la visualizzazione Easy)
3.Cliccate su Wizart Edit e successivamente su Events (questo tab non si vede con la visualizzazione classica)
4. Cliccate il tab Utilities e trascinate nel form a destra Load JS. Nella configurazione inserite il codice

window.addEvent('load', function() {
  var textarea = $('input_textarea_0');
  // execute the check after each keystroke
  textarea.addEvent('keyup', function() {
    // set the maximum number of characters
    max_chars = 50;
    // get the current value of the input field
    current_value = textarea.value;
    // get current character count
    current_length = current_value.length;
    // calculate remaining chars
    remaining_chars = max_chars - current_length;
    // show the remaining characters
    // Change color if remaining chars are five or less
    if ( remaining_chars <= 5 ) {
      textarea.setStyle('background-color', '#F88');
      textarea.value = textarea.value.substring(0, max_chars-1);
      if ( remaining_chars <= 0 ) {
        remaining_chars = 0;
      }
    } else {
      textarea.setStyle('background-color', 'white');
    }
    $('counter').innerHTML = remaining_chars;
  });
});

Dove al posto di input_textarea_0 ci va il fied ID (uguale alla field name)

Invece il parametro max_chars = 50 definisce il numero di caratteri scrivibili. Basta sostituire il numero 50 con un altro per ottenere il numero da voi scelto.

Se poi tornate nella configurazione della Text Area e andate in altro, inserite il codice

50 chars max 50

in Istruction for user. In questo modo verrà visualizzato dall’utente il numero di caratteri rimanenti.

Difficile? E mica è colpa mia!

Contattami


contattami.png

Sign up to keep in touch!

Se mi lasci la tua mail ti invierò comunicati stampa inerenti alla mia attività


Ovviamente puoi cancellarti quando lo ritieni opportuno