2

hola estoy haciendo una función en javascript pero no me funciona, quiero que la primera letra en el input sea en mayúscula para buscar datos en la base de datos

<input type="text" name="caja_busqueda" id="caja_busqueda" onkeypress=" mostrarPalabra();" ></input> 

 function mostrarPalabra() {
        var datos = document.getElementById('caja_busqueda').value;
        datos = convertir(caja_busqueda.toLowerCase());
        console.log(caja_busqueda);
    }

    function convertir(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    } 

eso es lo que tengo y no funciona

1
  • ¿algunas de las respuestas solucionó tu problema, @pepito ? Por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda! Commented el 8 ene. 2020 a las 15:13

4 respuestas 4

3

Puedes usar el atributo HTML onkeyup para ejecutar la función que se encargará de dar formato al texto del input.

La idea es poner en mayúscula la primera letra, y el resto deben estar en minúsculas. Es lo que entiendo de tu pregunta.

Si el usuario escribe todo en mayúsculas, tu implementación cambiará a mayúscula solo la primera letra y el resto las pondrá en minúsculas. En caso que el usuario escriba todo en minúsculas, pues se cambiará la primera letra a mayúsculas.

En tu pregunta no estableces qué sucede si son 2 o más palabras, es decir, ¿si el usuario escribe más de una palabra en el input, cuál es el comportamiento deseado?

Asumiendo que se trata del caso en que se escribe 1 sola palabra, entonces podrías hacerlo así:

//instanciamos el elemento input
var input = document.getElementById('entrada');
//función que capitaliza la primera letra
function capitalizarPrimeraLetra() {
  //almacenamos el valor del input
  var palabra = input.value;
  //Si el valor es nulo o undefined salimos
  if(!input.value) return;
  // almacenamos la mayuscula
  var mayuscula = palabra.substring(0,1).toUpperCase();
  //si la palabra tiene más de una letra almacenamos las minúsculas
  if (palabra.length > 0) {
    var minuscula = palabra.substring(1).toLowerCase();
  }
  //escribimos la palabra con la primera letra mayuscula
  input.value = mayuscula.concat(minuscula);
}
<form style="margin: 1rem;">
  <label for="entrada">Introduzca 1 palabra:</label><br>
  <input id="entrada" name="entrada" onkeyup="capitalizarPrimeraLetra()" />
</form>

Espero que esto te ayude a resolver tu problema.

1
  • La refactorizaré @JackNavaRow. Gracias por la sugerencia Commented el 8 ene. 2020 a las 20:12
1
<!-- Tú código;  -->

 function mostrarPalabra() {
        //cuando vas a declarar variables que el valor va permencer sobre esa misma función, utilizas let en vez de var  -->
        var datos = document.getElementById('caja_busqueda').value;
        // Acá estás enviado caja_busqueda (así está nombrado en html no en javascript) -->
        //Datos es quién contiene el valor de caja búsqueda -->
        document.getElementById('caja_busqueda').value = convertir(datos.toLowerCase());
        // Cuando realizas este console te dará por resultado undifined porque en efecto no existe -->
    }
    
    function convertir(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
  
    <!-- Yo lo realizaría de esta manera -->
    <!-- Cambié el onKeypress por onChange porque sino la última letra no toma el cambio que necesitas (PRUEBALO)-->
    <input type="text" name="caja_busqueda" id="caja_busqueda" onchange="mostrarPalabra();"></input>
    

Mi recomendación es que nombres a tus variables inicial mayúscula seguido de minúscula, tal como lo hiciste con tu función, si revisas documentación de javascript o incluso sus métodos se manejan de esta manera.

Espero te sirva, saludos...

0

Con CSS puedes darle a tu clase o etiqueta (text-transform:capitalize;)

Con JS puedes utilizar jquery para recorrer la cadena y cambiar la primera letra.

Te dejo un ejemplo.

<!DOCTYPE html>
<html lang="es">

<head>
    <title>Inicio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="Img/Favicon.png" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>


    <div class="mayusculas">
        <p class="mayus">hola</p>
        <p class="mayus">mundo</p>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var str = $('div.mayusculas > p.mayus');
        str.each(function () {
            $(this).text($(this).text().charAt(0).toUpperCase() + $(this).text().slice(1).toLowerCase());
        });
    </script>
</body>

</html>

</html>

0

Tomando como ejemplo la respuesta de Lud Osorio he realizado algo mas para trabajar con nombres propios y poner la primera letra mayuscula de cada uno de ellos, espero a alguien mas le sirva teniendo en cuenta que yo buscaba lo mismo y con la respuest de Lud Osorio logré solucionar...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dar Formato a Nombres Propios</title>
</head>

<body>
    <label for="input_name">Escribe nombres y apellidos:</label>
    <br>
    <input type="text" name="input_name" id="input_name" onchange="ShowName();"></input>

    <script>
        function ShowName() {
            var writtenName = document.getElementById('input_name').value;
            document.getElementById('input_name').value = formatToString(writtenName);
        }

        function formatToString(writtenName) {
            var tmp = writtenName.split(" ");
            var fullName;
            tmp.forEach(element => {
                if (fullName) {
                    fullName = fullName + " " + element.charAt(0).toUpperCase() + element.slice(1).toLocaleLowerCase();
                } else {
                    fullName = element.charAt(0).toUpperCase() + element.slice(1).toLocaleLowerCase();
                }
            })
            return fullName;
        }
    </script>
</body>

</html>

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.