¿Como hago para colocar la 1era letra en mayúscula de cada palabra?

Paulita · 2 Dic 2014

Hola! En esta oportunidad escribo porque tengo un input que se debe de ingresar el nombre y apellido pero me gustaria que cuando el usuario pierda el focus pueda colocar en mayúscula la primera letra de cada palabra, estuve leyendo que con la función "ucwords" se puede, como podria aplicarla, este es el input que tengo dentro de un formulario:

Código:

<input type="text" name="nombre" id="nombre"/>

que le debo de agregar para que haga lo que quiero? debo de usar javascript? aunque me gustaria hacerlo solo con php

amd2107 · 5 Dic 2014

Si lo estas enviando hacia PHP puedes hacerlo asi:

PHP:

<?php

ucfirst($_POST['nombre']);

?>

homeofhouse · 13 Dic 2014

Con lo de "me gustaría que cuando el usuario pierda el focus " supongo que quieres que cuando quite el cursor del input se haga mayúscula la primera letra de cada palabras.
Si esto es así, se debería realizar en la parte del cliente, por lo que olvídate de php. Utilizando simplemente CSS puedes obtener el efecto que deseas. Si no es así y lo quieres realizar con PHP, el compañero amd2107 ya te ha dado la solución.

Podrías utilizar algo así en tu código HTML:

HTML:

<label for="nombre">Nombre:</label><input class="tuInput" name="nombre" id="nombre" type="text"></input>

Y algo así en la hoja de estilos:

Código:

input.tuInput {text-transform:capitalize;}

Aquí puedes verlo y probarlo: http://jsfiddle.net/hkdguxt0/

Un saludo !

Paulita · 15 Dic 2014

homeofhouse dijo:
Y algo así en la hoja de estilos:

Código:

input.tuInput {text-transform:capitalize;}

Aquí puedes verlo y probarlo: Edit fiddle - JSFiddle

Hola amd2107 y homeofhouse, si me gustaria hacerlo en la parte del cliente, tienes razón me referia "que cuando quite el cursor del input se haga mayúscula la primera letra de cada palabras.", no sabia que se podía aplicar con css y me parece fino, lo probé y funciona.

Ahora una pregunta por casualidad se puede hacer para que trabaje con capitalize y lowercase, para así evitar que el usuario escriba en mayúscula?

homeofhouse · 15 Dic 2014

Vale pues, entonces fuera CSS. Mira este ejemplo que he hecho más o menos para que te guies con Javascript.

HTML:

<label for="nombre">Nombre:</label>
<input class="tuInput" name="nombre" id="nombre" type="text" onblur="funcionBlur();"></input>

Código:

var x = document.getElementById("nombre");x.addEventListener("blur", funcionBlur, true);


function funcionBlur() {
    var nombre = document.getElementById("nombre");
    nombre.value = capitalize(nombre.value);
}


function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
}

Aquí lo puedes probar "en directo": Edit fiddle - JSFiddle

Paulita · 15 Dic 2014

Hola homeofhouse gracias por responderme, lo probe y me funciona bien y lo adapte a una función de jquery y fino, hay algo que no entendi, si pudiera explicarme, en la parte de replace

homeofhouse dijo:
function capitalize(s){
return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
}[/CODE]

que significado tiene /\b./g?

También me di cuenta que si coloco este nombre y apellido, ejemplo: jorge ávila me sale "Jorge áVila" como se podría hacer en ese caso para que coloque la á en mayúscula?

homeofhouse · 15 Dic 2014

Se me ha colado esa xD

Mira prueba este:

Código:

var x = document.getElementById("nombre");
x.addEventListener("blur", funcionBlur, true);


function funcionBlur() {
    var nombre = document.getElementById("nombre");
    nombre.value =  nombre.value.toLowerCase().capitalize();
   
}


String.prototype.capitalize = function(){
       return this.replace( /(^|\s)([A-zÀ-ú])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
}

La expresión regular "/\b./g" indicaba el primer caracter de cada palabra, pero sin tener en cuenta los caracteres especiales.

Paulita · 16 Dic 2014

Hola homeofhouse lo probé y me da error en esta línea:

homeofhouse dijo:
return this.replace( /(^|\s)([A-zÀ-ú])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );

el error dice esto:
Uncaught SyntaxError: Invalid regular expression: /(^|\s)([A-zÃ€-Ãº])/: Range out of order in character class

homeofhouse · 16 Dic 2014

Fíjate en la codificación, si en el código Javascript tienes "([A-zÃ€-Ãº])" y no tienes "([A-zÀ-ú])" es normal que te de ese error.

Si no consigues arreglar lo de la codificación, intenta cambiar la expresión regular por esta "/(?:^|\s)\S/g" (sin las comillas)

Un saludo

Paulita · 16 Dic 2014

homeofhouse dijo:
Fíjate en la codificación, si en el código Javascript tienes "([A-zÃ€-Ãº])" y no tienes "([A-zÀ-ú])"

Hola homeofhouse tenias razón era por la codificación que no me funcionaba, lo probe y ahora si funciona, lo adapte al jquery para dos input y quedo así:

Código:

$('#nombre, #apellido').blur(function(){
      var x = capitalize($(this).val());
      $(this).val(x);

      function capitalize(s){
      return s.toLowerCase().replace( /(^|\s)([A-zÀ-ú])/g, function(a){ return a.toUpperCase(); } );
      };
});

Muchas Gracias homeofhouse por ayudarme y enseñarme:redface-new::smile:

¿Como hago para colocar la 1era letra en mayúscula de cada palabra?

Comparte esta página