במדריך זה, נקבל הבנה כיצד להשבית את שדה הקלט באמצעות CSS. אז, בואו נתחיל!
כיצד להשבית שדה קלט באמצעות CSS?
ב-CSS, אירועים מושבתים באמצעות ' אירועי מצביע ' תכונה. אז, ראשית, למד על המאפיין pointer-events.
מהו מאפיין CSS 'מצביע-אירועים'?
ה ' אירועי מצביע ' לשלוט כיצד רכיבי HTML מגיבים או מתנהגים לאירוע המגע, כגון אירועי קליק או הקשה, מצבי הפעלה או ריחוף, והאם הסמן גלוי או לא.
תחביר
התחביר של אירועי מצביע ניתן באופן הבא:
אירועי מצביע : אוטומטי | אף אחד ;
המאפיין שהוזכר לעיל לוקח שני ערכים, כגון ' אוטומטי ' ו' אף אחד ”:
- אוטומטי: הוא משמש לביצוע אירועי ברירת מחדל.
- אף אחד: הוא משמש כדי להשבית אירועים.
פנה אל הדוגמה הנתונה.
דוגמה 1: הוספת שדה קלט באמצעות CSS
בדוגמה זו, ראשית, ניצור div ונוסיף לו כותרת ושדה קלט. לאחר מכן, הגדר את סוג הקלט כ' טֶקסט ' והגדר את הערך שלו כ' הזן את שמך '.
HTML
< div >< מֶרְכָּז >
< h1 > השבת שדה קלט < / h1 >
< קֶלֶט סוּג = 'טֶקסט' ערך = 'הזן את שמך' >
< / מֶרְכָּז >
< / div >
לאחר מכן, עבור ל-CSS וסגנון את ה-div על ידי הגדרת צבע הרקע שלו כ' rgb(184, 146, 99) 'וגובה כ' 150 פיקסלים '.
CSS
div {רקע כללי- צֶבַע : rgb ( 184 , 146 , 99 ) ;
גוֹבַה : 150px;
}
הפלט של הקוד המתואר לעיל ניתן להלן. כאן, אנו יכולים לראות ששדה הקלט שלנו פעיל כעת ומקבל את הקלט מהמשתמש:
כעת, עבור לחלק הבא בו אנו משתמשים בערך של ' אירועי מצביע 'נכס כ' אף אחד '.
דוגמה 2: השבתת שדה קלט באמצעות CSS
כעת נשתמש ב' קֶלֶט ' כדי לגשת לאלמנט שנוסף בקובץ ה-HTML ולהגדיר את הערך של אירועי מצביע כ' אף אחד ”:
קֶלֶט {אירועי מצביע : אף אחד ;
}
לאחר שתטמיע את המאפיין האמור לעיל ' אירועי מצביע ' עם ' אף אחד ' ערך, הטקסט של שדה הקלט לא יהיה ניתן לעריכה, מה שמציין ששדה הקלט שלנו מושבת:
זהו זה! הסברנו את שיטת השבתת שדה הקלט באמצעות CSS.
סיכום
כדי להשבית שדה קלט ב-HTML, ' אירועי מצביע נעשה שימוש במאפיין של ה-CSS. כדי לעשות זאת, הוסף שדה קלט והגדר את הערך של אירועי מצביע כ' אף אחד ' כדי להשבית את שדה הקלט. במדריך זה, אנו מסבירים את שיטת השבתת שדה קלט באמצעות CSS ומספקים דוגמה לכך.