2

tengo un input en el cual quiero que el usuario ingrese su nombre y lo que quiero es que el texto ingresado la primera letra de cada palabra sea mayúscula. ¿Alguna idea?

 <div class="mayuscula">
    <input required type="text" class="form-control" name="filterPostName"  placeholder="Nombre"  [(ngModel)]="filterpostName" >
  </div>

.mayuscula{    
 text-transform: lowercase; } 
 
.mayuscula ::first-letter { 
text-transform: uppercase;     } 

intente con eso pero solo lo hace con la primea palabra y quiero que sea con todas las palabras ingresadas

1
  • al final de escribir Commented el 26 ago. 2020 a las 16:35

2 respuestas 2

2

solo usa esto:

text-transform: capitalize;

mas info.

Lo que hace es lo que necesitas cada palabra dentro del input se va a iniciar con mayúscula.

4
  • O que te parece una mejor que la de mozila???w3.org/TR/CSS2/text.html#propdef-text-transform
    – DavElsanto
    Commented el 26 ago. 2020 a las 17:42
  • ya quedó. Muchas gracias ;l Commented el 26 ago. 2020 a las 18:08
  • Una aclaracion importante, este CSS solo hace que se "visualice" el texto con las primeras letras de cada palabra en mayusculas (capitalizar palabras), pero el texto sigue con el mismo formato que ingreso el usuario (deberias realizar lo mismo del lado del servidor). O sea si ingreso "Demo demo demo", visualizara "Demo Demo Demo", pero cuando se envie al servidor se enviara como ingreso. Tenlo en cuenta. Commented el 13 jun. 2021 a las 12:11
  • Leíste la pregunta? Solo es presentación
    – DavElsanto
    Commented el 13 jun. 2021 a las 13:41
1

Si quieres que el texto "cambie" al medida que el usuario ingresa caracteres en el input text, si bien lo puedas hacer con CSS solo cambiará la visualización en el input pero el valor del texto seguirá tal cual lo ingreso el usuario. Aqui tienes dos opciones

  1. Puedes dejarlo con CSS y del lado del servidor realizar la misma tarea (con tu codigo del lado del servidor realizar este capitalizacion de cada palabra del texto). Esto es mas liviano en el cliente
  2. Realizar el cambio en el input con javscript (no con CSS)

Aquí dejo un ejemplo para la opcion 2 con puro javascript, deberias agregarlo a tus componentes y funciones de angular.

Te dejo un ejemplo para ir cambiandolo en javascript ya sea directo con un atributo onkeyup (muy intrusivo) o agregando un evento con addEventListener (menos intrusivo)

introducir la descripción de la imagen aquí

Seria algo así

 var app = app || {};
        
        app.toCapitalizeWords = function(text){
            return text.replace(/\w\S*/g, function(txt){
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        }

        app.inputKeyUp = function(e){
            var value = e.target.value;
            e.target.value = app.toCapitalizeWords(value);
        }

        app.inputKeyUpDirect = function(input){
            input.value = app.toCapitalizeWords(input.value);
        }

        var inputsToCapitalizeWordsCollection = document.getElementsByClassName("toCapitalizeWords");

        for (let i = 0; i < inputsToCapitalizeWordsCollection.length; i++) {
            const element = inputsToCapitalizeWordsCollection[i];
            element.addEventListener("keyup", app.inputKeyUp);
            
        }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <h1>Capitalize  words into input text</h1>

        <div class="row">
            <h4>Option 1 (Attribute: onkeyup)</h4>
            <div class="mb-3">  
                <label class="form-label">Write text...</label>
                <input type="text" name="txtPhase1" id="txtPhase1" value="" class="form-control" onkeyup="app.inputKeyUpDirect(this);" />
            </div>
        </div>

        <div class="row">
            <h4>Option 2 (addEventListener keyup)</h4>
            <div class="mb-3">  
                <label>Write text...</label><br>
                <input type="text" name="txtPhase2" id="txtPhase2" class="form-control toCapitalizeWords" value="" />
            </div> 
        </div>
    </div>          

Espero que te sirva de ayuda o guía

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.