Tengo un problema extraño. Quiero buscar un producto haciendo clic en el botón Intro. e.which == 13 || e.which == 10 con disparador de keypress keyup de tecla, como a continuación.
<form id="fform" method="get" autocomplete="off" action="/search"> <div class="search-inner-container"> <button @if(isListing) { id="buttonSearchTextListing" } aria-label="unf-search-btn" type="submit" class="search-button search-keyword" value="Search"></button> <input style="cursor: text;" @if(isListing) { form='fform' onclick="!this.form && document.getElementById('fform').submit()" name="srp-searchText" } else { name="srp-searchText" } id="searchbar-top" autocomplete="off" type="searchText" class="searchbar-text search-input bt1 @uuid" aria-label="Search" value="@text" placeholder='@l("searchBar.buttonLabel")' hx-get="/search-autocomplete" hx-vars="'srp-userInput': getSearchbarVal()" hx-trigger="keyup changed delay:500ms" hx-target=".searchbar-suggestion-container"/> <!-- hx-trigger="keyup changed delay:500ms, focus changed delay:500ms" --> </div> </form> $('.searchbar-text').each(function(){ $(this).on("keyup keypress", function(e) { if(e.which == 13 || e.which == 10) { // code } }); })Probé esto en el navegador de mi computadora portátil (chrome y Mozilla Firefox). Probé con el inspector de elementos en la pantalla de escritorio/móvil, funciona bien. Pero cuando lo pruebo en el navegador de un teléfono móvil, no funciona. Cuando presiono enter, salta a otra sección y no envía el formulario. Esto solo sucede en la página de búsqueda de productos en teléfonos móviles, pero en otras páginas funciona bien.
*Traté de depurar el código clave en el que se hizo clic en alerta cuando en la página de inicio aparece el código clave es 13, pero cuando en la búsqueda de productos no aparece el código clave de alerta
si desea probar, simplemente pruebe desde un sitio web que he desarrollado AQUÍ , e intente en el escritorio - navegador del teléfono móvil para buscar (por ejemplo, sierra) y haga clic en Intro
¿Alguien puede explicar por qué sucede esto?
Simplemente configure type='submit' en el botón y configure display none. Asegúrese de envolver el campo de entrada y el botón en etiquetas de formulario. Luego maneje el envío.
<form> <input type='text' placeholder='Search for an item'> <button type='submit'>Search</button> </form>Ante todo,
usando UIEvent.which parece ser un "no estándar". Utilice KeyboardEvent.keyCode en su lugar.
Además, la razón por la que "type=submit" no funcionó es porque lo usaste en un elemento <button> . No son técnicamente "entradas", por lo que puede usar el type en él.
Si intenta usar un elemento <input> , debería funcionar perfectamente bien. Algo como esto debería funcionar:
<input aria-label="unf-search-btn" type="submit" class="search-button search-keyword" value="Search"/> Luego, suponiendo que tiene configurado el elemento <form> , debería funcionar bien.
Tu código está funcionando exactamente como quieres en mi móvil, intenta poner return false; en el envío de entrada
$('.searchbar-text').each(function(){ $(this).on("keyup keypress", function(e) { if(e.which == 13 || e.which == 10) { console.log('Submitted'); }else{ console.log(e.which); } return false; }); });