event های input در js
سلام ، من یه input دارم ، زمانی که focus میشه یه المنت ساعت پایینش ظاهر میشه و گفتم اگه blur شد اون المنت محو بشه
مشکل اینجاس که اگه من بخوام کلیکی چیزی توی اون المنت ساعت انجام بدم input من blur میشه و اون المنت هم محو میشه
چیکار میتونم بکنم تا وقتی کلیک چیزی دارم انجام میدم اون المنت محو نشه و وقتی یه جایی از صفحه کلیک کردم اون موقع محو شه
let timeIpnut = document.querySelector('.input-time');
let timepicker = document.querySelector('.droptime');
let times = {
}
timeIpnut.addEventListener('focus',(e)=>{
timepicker.classList.add('show');
timepicker.addEventListener('mouseover',(e)=>{
timeIpnut.focus();
})
})
timeIpnut.addEventListener('blur',(e)=>{
timepicker.classList.remove('show');
})
موقعی که دارم توی اون المنت droptime عملیات کلیکی چیزی انجام میدم اون blur اجرا نشه . فقط زمانی که یه جای صفحه کلیک کردم
کدی رو نوشتم، بررسی کنید، ببینید چیزی که میخواید رو برآورده می کنه؟
از طریق رویداد blur ننوشتم، چون اینطوری به e مناسب دسترسی نداریم.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>select input and timer</title>
<style>
.droptime { display: none; margin-top: 1.5rem; width: 4rem; height: 4rem; text-align: center; background-color: #fa3; border-radius: 50%;}
.show { display: block; }
</style>
</head>
<body>
<input type="time" class="input-time" />
<div class="droptime">timer</div>
<script>
let timeIpnut = document.querySelector('.input-time');
let timepicker = document.querySelector('.droptime');
timeIpnut.addEventListener('focus',(e)=>{
timepicker.classList.add('show');
})
timepicker.addEventListener('mouseover',(e)=>{
timeIpnut.focus();
})
window.addEventListener('click', (e) => {
if(e.target === timeIpnut || e.target === timepicker) return;
else timepicker.classList.remove('show');
});
</script>
</body>
</html>لطفا اگه سوالی داشتید در همین محیط راکت، و یا در گفتگوی خصوصی مطرح کنید. چون پـاره وقت میام داخل سایت.
@milad ببینید وقتی روی اون المنت کلیک میکنیم اون المنت محو میشه . من میخوام اگه روی جای دیگه کلیک شد اون محو بشه
در نمونه کدی که قرار دادم، همین رو رقم زدم.
شما اگر روی input کلیک کنید، timer ظاهر میشه. در عین حال اگر روی timer هم کلیک کنید، باقی می مونه و محو نمیشه.
ولی اگر روی سایر نقاط صفحه کلیک کنید، زمانسج از صفحه پاک میشه.
کدی که نوشتم، چیزایی که می خواید رو برآورده می کنه. بررسی کردید؟
@milad تست کردم ولی با دیزاین خودم کار نکرد
.droptime{
display: none !important;
}
.droptime.show{
display: flex !important;
}من اینجا یک الگو ایجاد کردم، شما سعی کنید اون رو مطابق با طرح خودتون کنید. / در غیر اینصورت کدهاتون رو بصورت کامل قرار بدین تا بررسی کنم و مطابقت بدم.