Como inserir script para alteração de textos no input?

Adicionando a classe CSS no campo

Primeiramente, devemos configurar o campo do sistema para ser encontrado por classe CSS. Para isso, devemos acessar: Configurações > Campos do sistema.

Após isso, abrimos o método de edição do campo do sistema:

Na aba Básico, descemos até o final da mesma e encontramos o input Classe CSS, nele colocaremos a classe CSS que o script que será dito posteriormente encontrará. Feita a alteração, salve.

Criando o componente de script

Para alterar o estado da primeira letra de cada palavra para UPPERCASE (caixa alta), devemos criar o componente do script que realizará essa ação. Para isso, é preciso acessar: Configurações > Componentes > Novo componente.

Selecione o tipo do componente para HTML.

Agora, chegou o momento de dar um nome ao componente. Nesse caso, o nome que ficou foi: Script para transformar a inicial de cada palavra do nome completo em uppercase. Posteriormente, mudamos o tipo de código para Script e adicionamos o script abaixo:

let fieldNameCompleted = document.querySelector(".nomeCompleto");

let fieldIDNameCompleted = fieldNameCompleted.component.path;

fieldNameCompleted.addEventListener("change", (e) => {

  transformTextCapitilze = e.target.value.trim().split(" ").map((item) => item.charAt(0).toUpperCase() + item.slice(1).toLowerCase()).join(" ");

  fieldNameCompleted.component.data[fieldNameCompleted.component.path] = transformTextCapitilze;

  document.getElementsByName(`data[${fieldIDNameCompleted}]`)[0].value = transformTextCapitilze;

});

Feito isso, basta salvar o componente. 

Agora, precisamos adicionar o componente na tela onde ele irá ser executado e alterar o value do campo desejado, conforme foi pego pela classe CSS no script acima. Para isso, acessamos Portais e editamos o portal e o processo seletivo onde será adicionado o script.

Adicionando o script na tela do form

Com o processo seletivo aberto, clicamos em: Adicionar > Componentes > Pesquise o componente personalizado > Mova-o para a tela (conforme gif no final do artigo) e salve as alterações.

Gif de como mover o componente/campo para a tela:

❓Ficou com alguma dúvida?

Será um prazer te ajudar! Entre em contato com nosso time de atendimento, combinado?

✅ Este artigo te ajudou?

Se este conteúdo foi útil para a sua demanda, nos avise! Ficaremos felizes em saber.