[RESOLVIDO] Deixar apenas uma palavra lowercase em um input uppercase

Front-end JavaScript
,
#1

Olá.

Como faço para sempre que a letra x for digitada no meu input que é uppercase só a letra x fique lowercase?

Ex.:ENCONTRE O VALOR DE x QUANDO…

#2

Olá amigo, você pode utilizar o método replace para troca a ocorreria de um elemento.

var frase = 'ENCONTRE O VALOR DE X QUANDO...';

var resultado = frase.replace("X","x")

console.log(resultado)
#3

Olá Francisco,

pois é, pensei que seria assim fácil tbm, mas como o campo tem o style=“text-transform:uppercase”, a valor sempre muda para maiúsculo.

Preciso deixar al minúsculo em um input com propriedade uppercase.

#4

Olá, tenta fazer o replace colocando um elemento html, ai no css desse novo elemento você coloca o lowercase:

<div id="changeCase">ENCONTRE O VALOR DE x QUANDO</div>

<style>
  div {
    text-transform: uppercase;
  }

  span {
    text-transform: lowercase;
  }
</style>

<script>
    var phrase = document.querySelector('#changeCase');
    var findX = /\sX\s/;

    var newPhrase = phrase.innerText;
    var newX = newPhrase.replace(findX, ' <span>x</span> ');

    phrase.innerHTML = newX;
</script>
#5

Eu consigo fazer isso no momento da digitação no input type=“text”?

o style desse input como upper e ao digitar só a letra x tem que ficar como lowerCase.

#6

Vê se assim ajuda, dessa forma não pode usar o text-transform do css, se não vai sempre ficar em maiusculo.

<input type="text" id="changeCase" placeholder="Digite...">

var phrase = document.querySelector('#changeCase');

/*
 * No EventListener você pode usar o:
 * 'keypress' ou 'keyup'
 */
phrase.addEventListener('keypress', function(e) {
  var inputValue = e.target.value;
  var getLast = inputValue.split('')[inputValue.length - 1];

  /*
   * CONTA QUANTOS CARACTERES FORAM DIGITADOS NO INPUT.
   * @ Caso tenha algum caracter,
   * faz o replace do caracter digitado por ele
   * mesmo em UpperCase mas,
   * apenas se não for o "x".
   */
  if (inputValue.length > 0) {
    if (getLast === 'x' || getLast === 'X') {
      e.target.value = inputValue.replace(getLast, getLast.toLowerCase());
    } else {
      e.target.value = inputValue.replace(getLast, getLast.toUpperCase());
    }
  }
});
1 curtida
#7

Perfeito Bruno, bem isso que eu precisava.
Só mais uma dúvida.
Quando uso o text-transform do css quando digito um texto ele já fica maiúsculo, tem como eu fazer isso sem ser transformando letra por letra na hora de digitar, como acontece com o keyup?

#8

Puxa, acho que não tem como.
No CSS já deixa o input todo com uppercase.
Nesse caso, o JavaScript verifica cada letra e faz a transformação. Ai teria que pesquisar melhor se tem como fazer.

1 curtida
#9

Olá Bruno, consegui fazer da maneira que eu queria, segue resultado final:


<input name="yourInput"/>

<script>
var inputValue  = document.getElementsByTagName("input")[0]; // just your input element

inputValue .oninput = function() {
	var getLast  = inputValue.value.split('')[inputValue.value.length - 1];
     
	if (inputValue.value.length > 0) { 
		if (getLast === 'x'  || getLast === 'X') {
			inputValue.value = inputValue.value.replace(getLast, getLast.toLowerCase());
		} else {
			inputValue.value = inputValue.value.replace(getLast, getLast.toUpperCase());
		}
		}
}
</script>
1 curtida