javascript - not - text-transform css ejemplos

Cómo aplicar Title Case en el cuadro de entrada a través de css

Question

Estoy usando la propiedad de transformación de texto para convertir el texto de la casilla de entrada en Title Case, pero no obtengo la propiedad o combinación exacta para hacer esto.

También intenté

text-transform: capitalize;
text-transform: lowercase;

Estoy intentando la conversión automática para estos

nIklesh raut : Niklesh Raut
NIKLESH RAUT : Niklesh Raut

O debería ir con Javascript.

Answer 1

Tuve un problema similar una vez. text-transform: capitalise solo escribirá en mayúscula la primera letra de la palabra. Otras letras no se verán afectadas.

Por ejemplo:

<p>nIklesh raut</p>
<p>NIKLESH RAUT</p>
<p>niklesh RAUT</p>
p {
text-transform: capitalize;
}

salidas como:

NIklesh Raut

NIKLESH RAUT

Niklesh RAUT

http://codepen.io/jaycrisp/pen/YwjyME

Intenté muchas cosas y no encontré la manera de hacerlo solo en CSS. La mejor opción es hacer que el servidor devuelva una cadena en minúscula, luego la transformación del texto se comportará de manera consistente. Tenga en cuenta sin embargo, esto también es problemático para los nombres. Por ejemplo, Leo McGarry se formateará para Leo Mcgarry.

Si no tiene acceso de back-end, primero deberá convertir a una cadena en minúsculas en javascript.

editar

La especificación realmente dice lo siguiente:

capitalizar

Pone el primer carácter de cada palabra en mayúscula; otros personajes no se ven afectados.

https://www.w3.org/wiki/CSS/Properties/text-transform

Answer 2

CSS solo afectará el estilo del texto en su texto, no cambiará el valor subyacente del cuadro de texto. Esto significa que cuando acceda al valor a través de JavaScript, o si lo POSTRE a su servidor, el valor será la forma en que fue ingresado, no convertido a mayúsculas. Tendrá que hacerlo usted mismo con JS, o con su idioma del lado del servidor.

Answer 3

Puede hacer lo siguiente siguiendo css. Esto funcionará para toda la palabra.

input {
text-transform: capitalize;
}
::-webkit-input-placeholder {
text-transform: none;
}
:-moz-placeholder {
text-transform: none;
}
::-moz-placeholder {
text-transform: none;
}
:-ms-input-placeholder {
text-transform: none;
}

<input type="text" placeholder="test" />

Nota: Pero esto funcionará cuando el usuario escriba solo una letra pequeña. Pero, te será útil ir más allá. Para hacerlo para todos, creo que deberías usar Scripting.

Fiddle de trabajo

Answer 4

Sugerencias: compruebe la hoja de estilo de restauración de css para cualquier anulación de la transformación de texto

propiedad text-transform - Definición y uso

La propiedad de transformación de texto controla las mayúsculas del texto.

Valor predeterminado: ninguno

Heredado: sí

Versión: CSS1

Sintaxis de JavaScript: object.style.textTransform = "mayúscula"

Todos los navegadores son totalmente compatibles con la propiedad.

Sintaxis CSS

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
// For DOM
document.getElementById("myP").style.textTransform = "capitalize";

Valores de propiedad

ninguno - Sin mayúsculas. El texto se representa tal como es. Esto es predeterminado

capitalizar - Transforma el primer carácter de cada palabra en mayúscula

mayúscula: transforma todos los caracteres en mayúsculas

minúsculas: transforma todos los caracteres en minúsculas

initial: establece esta propiedad en su valor predeterminado.

inherit - Hereda esta propiedad de su elemento padre.

Archivo de trabajo de prueba:

https://jsfiddle.net/tfn2k46n/

Answer 5

text-align: center;
font-family: ''Signika'', sans-serif;
line-height: 60px;
font-size: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;

Usa algo como esto

Answer 6

Si usa Javascript, esto resolvería su problema

var str = "nIklesh raut";
str.replace(//w/S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

Ref: ¿Cómo capitalizar la primera letra de cada palabra, como una ciudad de 2 palabras?