Codice JavaScript per la maiuscola degli input di testo

Question

Sto utilizzando la popolare estensione di Firefox Greasemonkey.

Mi piacerebbe sapere se ci fosse un modo per capitalizzare tutti gli input di testo in una certa forma, quindi se vorrei utilizzare jQuery il codice sarebbe simile:

$('form#formid input[type=text]').capitalize(); 

Ora, naturalmente, so .capitalize() non è una funzione valida e, per capitalizzare il testo, è necessario un codice JavaScript complicato, ma dopo tutto il googling, non sono riuscito a trovarne uno che sembrava potesse essere implementato in Greasemonkey.

Qualcuno può aiutarmi a scrivere questo script?

da capitalizzare, voglio dire, capitalizzando la prima lettera di ogni parola, come il CSS text-transform:capitalize; e deve ignorare le lettere l'utente potrebbe mettere in forse farlo su modulo presentare sarebbe più facile ...

Grazie.

Answer 1

//add a function to jQuery so we can call it on our jQuery collections 
$.fn.capitalize = function() { 

    //iterate through each of the elements passed in, `$.each()` is faster than `.each() 
    $.each(this, function() { 

     //split the value of this input by the spaces 
     var split = this.value.split(' '); 

     //iterate through each of the "words" and capitalize them 
     for (var i = 0, len = split.length; i < len; i++) { 
      split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1); 
     } 

     //re-join the string and set the value of the element 
     this.value = split.join(' '); 
    }); 
    return this; 
}; 

Ecco una demo: http://jsfiddle.net/jasper/qppGQ/1/

Questo potrebbe essere utilizzato all'interno di un gestore di eventi per mantenere sempre un corpo capitalizzato di testo:

//when the user presses a key and the value of the `textarea` is changed, the new value will have all capitalized words 
$('textarea').on('keyup', function() { 
    $(this).capitalize(); 
}).capitalize();//also capitalize the `textarea` element(s) on initialization 

Ecco una demo: http://jsfiddle.net/jasper/qppGQ/2/

Aggiornamento

Per avere la prima lettera da capitalizzare e il resto della parola da minuscole possiamo semplicemente usare .toLowerCase() nel resto della stringa dopo capitalizzare la prima lettera:

 ... 
     for (var i = 0, len = split.length; i < len; i++) { 
      split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1).toLowerCase(); 
     } 
     ... 

Ecco una demo: http://jsfiddle.net/jasper/qppGQ/3/ versione

Answer 2

È questo che stai cercando di fare?

(function ($) { 

    $.fn.capitalize = function() { 
     return this.val(function (i, oldValue) { 
      return oldValue.charAt(0).toUpperCase() + oldValue.slice(1); 
     }); 
    }; 

})(jQuery); 

Se si voleva eseguire questa azione in "tempo reale", si può solo elaborare l'azione all'interno di un evento:

(function ($) { 

    $.fn.capitalize = function() { 
     this.on('keyup.capitalize change.capitalize', function() { 
      $(this).val(function (i, oldValue) { 
       return oldValue.charAt(0).toUpperCase() + oldValue.slice(1); 
      }); 
     }); 
    }; 

})(jQuery); 

Answer 3

Si sta andando a voler un gestore di eventi per l'oggetto DOM in questione - in particolare, il gestore di eventi keypress. Dovrai leggere il testo del campo di inserimento dopo ogni pressione di un tasto per garantire che tutte le parole (testo circondato da spazi) abbiano il primo carattere in maiuscolo.

Ad esempio:

$('form#formid input[type=text]').keypress(function(event) { 
// Function body goes here 
}); 

Come strategia generale, vi consiglio di dividere il valore del campo di input da spazi (utilizzando str.split(" ");). Quindi, scorrere attraverso ciascuna delle stringhe risultanti. Per ogni stringa, tagliare tutto dopo la prima lettera e aggiungere un primo carattere in maiuscolo alla stringa affettata. Puoi vedere altre risposte per mostrarti come farlo. Combina tutte queste stringhe in una e imposta il valore dell'input in questa stringa in maiuscolo.

Answer 4

La mia semplice implementazione di una funzione in maiuscolo suddivide una stringa in base a spazi e in maiuscolo la prima lettera di ogni parola. Assume che ogni parola sia divisa almeno da uno spazio.

function capitalize(text) { 
    var i, words, w, result = ''; 

    words = text.split(' '); 

    for (i = 0; i < words.length; i += 1) { 
     w = words[i]; 
     result += w.substr(0,1).toUpperCase() + w.substr(1); 
     if (i < words.length - 1) { 
      result += ' '; // Add the spaces back in after splitting 
     } 
    } 

    return result; 
} 

Esempio output della console:

> capitalize("some tEsT e strING a B c 1 2 3") 
    "Some TEsT E StrING A B C 1 2 3" 

Answer 5

con l'evento legame costruito in

Simpl utilizzare

$('input[type="text"]').capitalize() 

http://jsfiddle.net/uUjgg/

(function($) { 

$.fn.capitalize = function() { 
    return this.each(function() { 
     var $field = $(this); 

     $field.on('keyup change', function() { 
      $field.val(function(i, old) { 
       if (old.indexOf(' ') > -1) { 
        var words = old.split(' '); 
        for (i = 0; i < words.length; i++) { 
         words[i] = caps(words[i]); 
        } 
        return words.join(' '); 
       } else { 
        return caps(old); 
       } 
      }); 
     }); 
    }); 

    function caps(str) { 
     return str.charAt(0).toUpperCase() + str.slice(1); 
    } 
}; 

})(jQuery); 

Answer 6

presi i suggerimenti qui e hanno formulato qualcosa di un po 'più facile utilizzando JavaScript standard. Avevo bisogno di capitalizzare ogni parola di una casella di input su un'app Web per iPad, l'autocapitalize non funzionava in modo coerente. Ecco il lavoro intorno:

ingresso HTML

<input type="text" id="this_input" name="this_input" onkeyup="javascript:capitalize(this.id, this.value);"> 

Javascript

<script type="text/javascript"> 
    function capitalize(textboxid, text) { 
     // string with alteast one character 
     var i, words, w, result = ''; 

    words = text.split(' '); 

    for (i = 0; i < words.length; i += 1) { 
     w = words[i]; 
     result += w.substr(0,1).toUpperCase() + w.substr(1); 
     if (i < words.length - 1) { 
      result += ' '; // Add the spaces back in after splitting 
     } 
    } 
     document.getElementById(textboxid).value = result; 
    } 
    </script>