جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
فرهاد
3 سال پیش توسط فرهاد مطرح شد
9 پاسخ

event های input در js

سلام ، من یه input دارم ، زمانی که focus میشه یه المنت ساعت پایینش ظاهر میشه و گفتم اگه blur شد اون المنت محو بشه

مشکل اینجاس که اگه من بخوام کلیکی چیزی توی اون المنت ساعت انجام بدم input من blur میشه و اون المنت هم محو میشه

چیکار میتونم بکنم تا وقتی کلیک چیزی دارم انجام میدم اون المنت محو نشه و وقتی یه جایی از صفحه کلیک کردم اون موقع محو شه

@milad


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

کدهاتون رو فراموش کردید قرار بدین.


فرهاد
تخصص : Javascript Developer
@cfarhad 3 سال پیش آپدیت شد
0

@milad

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 اجرا نشه . فقط زمانی که یه جای صفحه کلیک کردم


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

مشخص هستش که کدهای html تون رو هم باید قرار بدین در این مسئله.


فرهاد
تخصص : Javascript Developer
@cfarhad 3 سال پیش مطرح شد
0

@milad امکان داره آیدی تلگرامتون یا اینستاگرامی چیزی بهم بدید اونجا صحبت کنیم ؟


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش آپدیت شد
0

کدی رو نوشتم، بررسی کنید، ببینید چیزی که میخواید رو برآورده می کنه؟
از طریق رویداد 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>

لطفا اگه سوالی داشتید در همین محیط راکت، و یا در گفتگوی خصوصی مطرح کنید. چون پـاره وقت میام داخل سایت.


فرهاد
تخصص : Javascript Developer
@cfarhad 3 سال پیش مطرح شد
0

@milad ببینید وقتی روی اون المنت کلیک میکنیم اون المنت محو میشه . من میخوام اگه روی جای دیگه کلیک شد اون محو بشه

توضیح تصویر رو وارد کنید


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

در نمونه کدی که قرار دادم، همین رو رقم زدم.
شما اگر روی input کلیک کنید، timer ظاهر میشه. در عین حال اگر روی timer هم کلیک کنید، باقی می مونه و محو نمیشه.
ولی اگر روی سایر نقاط صفحه کلیک کنید، زمانسج از صفحه پاک میشه.

کدی که نوشتم، چیزایی که می خواید رو برآورده می کنه. بررسی کردید؟


فرهاد
تخصص : Javascript Developer
@cfarhad 3 سال پیش آپدیت شد
0

@milad تست کردم ولی با دیزاین خودم کار نکرد

.droptime{
    display: none !important;
}

.droptime.show{
    display: flex !important;
}

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

من اینجا یک الگو ایجاد کردم، شما سعی کنید اون رو مطابق با طرح خودتون کنید. / در غیر اینصورت کدهاتون رو بصورت کامل قرار بدین تا بررسی کنم و مطابقت بدم.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام