javascript - not - text-transform css ejemplos
Cómo aplicar Title Case en el cuadro de entrada a través de css (6)
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.
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.
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.
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.
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:
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
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?