BotBeta
Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Claro, aquí tienes el script ajustado y organizado para que funcione correctamente, tanto en dispositivos móviles como en computadoras de escritorio. Este script asegura que el divvar isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile){
$(document).on('touchstart', function(e){
var container = $(".vips");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".vips").css("display","none");
}
});
$(document).on('touchmove', function(e){
var container = $(".vips");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".vips").remove();
}
});
}else{
var inputBlurred = false;
var mouseIsInside = false;
$('.peks').on('mouseenter', '.vips', function(){
mouseIsInside = true;
}).on('mouseleave', '.vips', function(){
mouseIsInside = false;
if(inputBlurred){
$(".vips").css("display","none");
}
});
$('.clair').on('focus', '.peks', function() {
inputBlurred = false;
}).on('blur', '.peks', function() {
inputBlurred = true;
if(!mouseIsInside){
$(".vips").css("display","none");
}
});
$("input.peks").focus()
}
<div class="vips">
<a href="../?search='.$_GET['search'].$avg1.$avg2.'" class="maps">Todos los precios</a>
<form method="post">
<input onkeypress="handleKeyPress(event);" style="margin-bottom:10px;width:calc(100% - 60px);" onblur="suarfers();" class="peks" id="maypush" required="" name="price" autocomplete="off" placeholder="Precio del producto.." type="text" maxlength="30" />
<input class="holds" value="B" name="sendprice" type="submit" />
</form>
</div>
puedes hacer que funcione el script porfa
.vips
se oculte adecuadamente dependiendo del enfoque del input y la posición del mouse.### Script Ajustado
JavaScript:
$(document).ready(function() {
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var inputBlurred = false;
var mouseIsInside = false;
// Detectar eventos en dispositivos móviles
if (isMobile) {
$(document).on('touchstart', function(e) {
var container = $(".vips");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.css("display", "none");
}
});
} else {
// Manejo del mouse en dispositivos de escritorio
$('.vips').on('mouseenter', function() {
mouseIsInside = true;
}).on('mouseleave', function() {
mouseIsInside = false;
if (inputBlurred) {
$(".vips").css("display", "none");
}
});
// Manejo del foco en el input
$("#maypush").on('focus', function() {
inputBlurred = false;
}).on('blur', function() {
inputBlurred = true;
if (!mouseIsInside) {
$(".vips").css("display", "none");
}
});
}
});
### Estructura HTML
Asegúrate de que tu estructura HTML esté adecuada. Aquí te muestro una parte de tu HTML ajustada:
HTML:
<div class="vips">
<a href="../?search=<?php echo $_GET['search'].$avg1.$avg2; ?>" class="maps">Todos los precios</a>
<form method="post">
<input onkeypress="handleKeyPress(event);" style="margin-bottom:10px;width:calc(100% - 60px);"
class="peks" id="maypush" required autocomplete="off" placeholder="Precio del producto.." type="text" maxlength="30" />
<input class="holds" value="B" name="sendprice" type="submit" />
</form>
</div>
### Explicación de los Cambios
1. Eventos Táctiles en Móviles: Mantiene el evento
touchstart
para ocultar el div cuando haces clic fuera de él.2. Eventos del Mouse en Escritorio: Maneja la entrada del usuario en el input y oculta el div cuando el input pierde el foco y el mouse no está sobre el div.
3. Variables de Estado: Usa las variables
inputBlurred
y mouseIsInside
para controlar la lógica de visibilidad.Con esto, tu script debería funcionar correctamente tanto en dispositivos móviles como en computadoras de escritorio. Si necesitas más ajustes, ¡no dudes en pedirlo!