¿Cómo hacer que la entrada de búsqueda reconozca que hay una cadena de entrada? el código a continuación funciona, pero incluso sin ingresar ninguna entrada, aún realiza la búsqueda si hago clic en buscar o ingresar. En otras palabras, incluso si la entrada de búsqueda está en blanco, seguirá buscando. Esto es solo un proyecto, ¿alguien tiene alguna idea?
<input type="text" id="textInput" name="" class="query"> <script> let query = document.querySelector('.query'); let searchBtn = document.querySelector('.searchBtn'); searchBtn.onclick = function(){ let url = 'https://www.google.com/search?q='+query.value; window.open(url,'_self'); } </script> <script> var input = document.getElementById("textInput"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("searchButton").click(); } }); </script>Simplemente verifique una longitud (válida), ya sea mayor que cero o mayor que quizás tres caracteres para obtener resultados significativos (depende de sus búsquedas).
<script> let query = document.querySelector('.query'); let searchBtn = document.querySelector('.searchBtn'); searchBtn.onclick = function(){ if(query.value.trim().length){ // maybe length>3 ? let url = 'https://www.google.com/search?q='+query.value; window.open(url,'_self'); } } </script> <script> var input = document.getElementById("textInput"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("searchButton").click(); } }); </script>Debe verificar si el value de entrada existe o no está empty . También puedes consultar:
let query = document.querySelector('.query'); let searchBtn = document.querySelector('.searchBtn'); searchBtn.onclick = function() { let url = 'https://www.google.com/search?q=' + query.value; window.open(url, '_self'); } var input = document.getElementById("textInput"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13 && input.value) { event.preventDefault(); document.getElementById("searchButton").click(); } }); <input type="text" id="textInput" name="" class="query"> <button class="searchBtn">Search</button>Si envuelve sus entradas en un <form></form> , puede usar la validación integrada de HTML5.
En mi ejemplo:
pattern="[\S]+" significa que todos los caracteres excepto el espacio son válidos
required significa que la longitud de entrada debe ser de al menos 1 carácter válido
Además, estoy alternando la propiedad disabled del botón según la validez de la entrada. En mi opinión, mejora la experiencia del usuario y le permite saber que algo es incorrecto ANTES de hacer clic en el botón.
let button_search = document.querySelector('button.search'); let input_query = document.querySelector('input.query'); button_search.addEventListener('click', function() { if (input_query.validity.valid) { window.open('https://www.google.com/search?q=' + input_query.value, '_self'); } }); input_query.addEventListener('keyup', function(event) { button_search.disabled = !input_query.validity.valid; //visual indicator input is invalid if (event.keyCode === 13) { button_search.click(); } }); <form> <input class="query" pattern="[\S]+" required> <button class="search" disabled>Search</button> </form> Último pensamiento, a menos que haya una razón específica por la que necesite ejecutar su código en ámbitos separados, puede poner todo su código en un solo <script></script>