Convertir la première lettre en majuscule dans la zone de saisie

 val = val.substr(0, 1).toUpperCase() + val.substr(1); 

ou:

 val = val.charAt(0).toUpperCase() + val.substr(1); 

 input { text-transform: capitalize; } 

http://jsfiddle.net/yuMZq/1/

Utiliser du texte transformer serait mieux.

Vous pouvez convertir la première lettre en majuscule tout en évitant le problème ennuyeux du curseur qui saute au début de la ligne en vérifiant la position du curseur et en le réinitialisant. Je le fais sur un formulaire en définissant quelques fonctions, une pour toutes les majuscules, une pour les cas exacts, une pour seulement les majuscules initiales … Ensuite, deux fonctions pour la position du curseur, qui obtient et une qui définit:

 function ProperCase(el) { pos = getInputSelection(el); s = $(el).val(); s = s.toLowerCase().replace(/^(.)|\s(.)|'(.)/g, function($1) { return $1.toUpperCase(); }); $(el).val(s); setCaretPosition(el,pos.start); } function UpperCase(el) { pos = getInputSelection(el); s = $(el).val(); s = s.toUpperCase(); $(el).val(s); setCaretPosition(el,pos.start); } function initialCap(el) { pos = getInputSelection(el); s = $(el).val(); s = s.substr(0, 1).toUpperCase() + s.substr(1); $(el).val(s); setCaretPosition(el,pos.start); } /* GETS CARET POSITION */ function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } /* SETS CARET POSITION */ function setCaretPosition(el, caretPos) { el.value = el.value; // ^ this is used to not only get "focus", but // to make sure we don't have it everything -selected- // (it causes an issue in chrome, and having it doesn't hurt any other browser) if (el !== null) { if (el.createTextRange) { var range = el.createTextRange(); range.move('character', caretPos); range.select(); return true; } else { // (el.selectionStart === 0 added for Firefox bug) if (el.selectionStart || el.selectionStart === 0) { el.focus(); el.setSelectionRange(caretPos, caretPos); return true; } else { // fail city, fortunately this never happens (as far as I've tested) :) el.focus(); return false; } } } } 

Ensuite, lorsqu’un document est prêt, j’applique un écouteur d’événement keyup aux champs que je souhaite vérifier, mais j’écoute uniquement les clés pouvant réellement modifier le contenu du champ (je saute la touche “Maj”, par exemple …), et si l’utilisateur clique sur “Echap”. Je rétablis la valeur d’origine du champ …

  $('.updatablefield', $('#myform')).keyup(function(e) { myfield=this.id; myfieldname=this.name; el = document.getElementById(myfield); // or the jquery way: // el = $(this)[0]; if (e.keyCode == 27) { // if esc character is pressed $('#'+myfield).val(original_field_values[myfield]); // I stored the original value of the fields in an array... // if you only need to do the initial letter uppercase, you can apply it here directly like this: initialCap(el); } // end if (e.keyCode == 27) // if any other character is pressed that will modify the field (letters, numbers, symbols, space, backspace, del...) else if (e.keyCode == 8||e.keycode == 32||e.keyCode > 45 && e.keyCode < 91||e.keyCode > 95 && e.keyCode < 112||e.keyCode > 185 && e.keyCode < 223||e.keyCode == 226) { // if you only need to do the initial letter uppercase, you can apply it here directly like this: initialCap(el); } // end else = if any other character is pressed // }); // end $(document).keyup(function(e) 

Vous pouvez voir un violon qui fonctionne de cet exemple ici: http://jsfiddle.net/ZSDXA/

Tout simplement:

 $this.val(val); 

 $(document).ready(function() { $('input').on('keypress', function(event) { var $this = $(this), val = $this.val(); val = val.toLowerCase().replace(/\b[az]/g, function(letter) { return letter.toUpperCase(); }); console.log(val); $this.val(val); }); }); 

Comme @roXon l’ a montré, ceci peut être simplifié:

 $(document).ready(function() { //alert('ready'); $('input').on('keypress', function(event) { var $this = $(this), val = $this.val(); val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase(); $this.val(val); }); }); 

Une solution alternative, et meilleure à mon avis, consisterait uniquement à atsortingbuer un style à l’élément, puis à faire votre côté serveur logique.

Cela supprime la surcharge de n’importe quel javascript et garantit que la logique est gérée côté serveur (ce qui devrait être le cas de toute façon!)

 $('input').on('keyup', function(event) { $(this).val(function(i, v){ return v.replace(/[a-zA-Z]/, function(c){ return c.toUpperCase(); }) }) }); 

http://jsfiddle.net/AbxVx/

Cela fera pour chaque fonction d’appel textfield sur keyup

où id est l’id de votre champ de texte et la valeur est la valeur que vous tapez dans le champ

 function capitalizeFirstLetter(value,id) { if(value.length>0){ var str= value.replace(value.substr(0,1),value.substr(0,1).toUpperCase()); document.getElementById(id).value=str; } } 

n’utilisez ceci que Ce travail comme prénom en caractère capital

 style="text-transform:capitalize; 

Comme

  $('.form-capitalize').keyup(function(event) { var $this = $(this), val = $this.val(), regex = /\b[az]/g; val = val.toLowerCase().replace(regex, function(letter) { return letter.toUpperCase(); }); this.value = val; // I want this value to be in the input field. console.log(val); });