லைட்பாக்ஸ்கள், பயனர் அறிவிப்புகள் அல்லது முற்றிலும் தனிப்பயன் உள்ளடக்கத்திற்கான உரையாடல்களை உங்கள் தளத்தில் சேர்க்க பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்ட் மாதிரி செருகுநிரலைப் பயன்படுத்தவும்.
எப்படி இது செயல்படுகிறது
பூட்ஸ்டார்ப்பின் மாதிரி கூறுகளுடன் தொடங்குவதற்கு முன், எங்கள் மெனு விருப்பங்கள் சமீபத்தில் மாறிவிட்டதால், பின்வருவனவற்றைப் படிக்க மறக்காதீர்கள்.
மாதிரிகள் HTML, CSS மற்றும் JavaScript உடன் கட்டமைக்கப்பட்டுள்ளன. அவை ஆவணத்தில் உள்ள எல்லாவற்றிலும் நிலைநிறுத்தப்பட்டு, ஸ்க்ரோலில் இருந்து ஸ்க்ரோலை அகற்றி, <body>அதற்குப் பதிலாக மாதிரி உள்ளடக்கம் உருட்டும்.
மாதிரி "பின்னணியில்" கிளிக் செய்தால், தானாக மாதிரி மூடப்படும்.
பூட்ஸ்ட்ராப் ஒரு நேரத்தில் ஒரு மாதிரி சாளரத்தை மட்டுமே ஆதரிக்கிறது. உள்ளமைக்கப்பட்ட மாதிரிகள் ஆதரிக்கப்படாது, ஏனெனில் அவை மோசமான பயனர் அனுபவங்கள் என்று நாங்கள் நம்புகிறோம்.
மாதிரிகள் பயன்படுத்துகின்றன position: fixed, இது சில நேரங்களில் அதன் ரெண்டரிங் பற்றி சற்று குறிப்பிட்டதாக இருக்கலாம். முடிந்த போதெல்லாம், மற்ற உறுப்புகளிலிருந்து சாத்தியமான குறுக்கீடுகளைத் தவிர்க்க, உங்கள் மாதிரி HTML ஐ உயர்நிலை நிலையில் வைக்கவும். .modalமற்றொரு நிலையான உறுப்புக்குள் கூடு கட்டும்போது நீங்கள் சிக்கல்களைச் சந்திக்க நேரிடும் .
HTML5 அதன் சொற்பொருளை எவ்வாறு வரையறுக்கிறது என்பதன் காரணமாக , autofocusHTML பண்புக்கூறு பூட்ஸ்டார்ப் மாதிரிகளில் எந்த விளைவையும் ஏற்படுத்தாது. அதே விளைவை அடைய, சில தனிப்பயன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்:
டெமோக்கள் மற்றும் பயன்பாட்டு வழிகாட்டுதல்களுக்கு தொடர்ந்து படிக்கவும்.
எடுத்துக்காட்டுகள்
மாதிரி கூறுகள்
கீழே ஒரு நிலையான மாதிரி உதாரணம் (அதன் பொருள் positionமற்றும் displayமேலெழுதப்பட்டது). மாதிரி தலைப்பு, மாதிரி உடல் (தேவையானது padding) மற்றும் மாதிரி அடிக்குறிப்பு (விரும்பினால்) ஆகியவை அடங்கும். முடிந்தவரை நிராகரிப்பு நடவடிக்கைகளுடன் மாதிரி தலைப்புகளைச் சேர்க்குமாறு கேட்டுக்கொள்கிறோம் அல்லது மற்றொரு வெளிப்படையான பணிநீக்கச் செயலை வழங்குமாறு கேட்டுக்கொள்கிறோம்.
மாதிரி தலைப்பு
மாதிரி உடல் உரை இங்கே செல்கிறது.
நேரடி டெமோ
கீழே உள்ள பொத்தானைக் கிளிக் செய்வதன் மூலம் வேலை செய்யும் மாதிரி டெமோவை மாற்றவும். அது கீழே சரிந்து பக்கத்தின் மேல் இருந்து மங்கிவிடும்.
Modal title
Woohoo, you're reading this text in a modal!
நிலையான பின்னணி
பேக்டிராப் நிலையானதாக அமைக்கப்பட்டால், அதன் வெளியே கிளிக் செய்யும் போது மாடல் மூடப்படாது. அதை முயற்சிக்க கீழே உள்ள பொத்தானைக் கிளிக் செய்யவும்.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
நீண்ட உள்ளடக்கத்தை ஸ்க்ரோல் செய்கிறது
மாடல்கள் பயனரின் வியூபோர்ட் அல்லது சாதனத்திற்கு மிக நீளமாக இருக்கும்போது, அவை பக்கத்திலிருந்து சுயாதீனமாக உருட்டும். நாங்கள் என்ன சொல்கிறோம் என்பதைப் பார்க்க கீழே உள்ள டெமோவை முயற்சிக்கவும்.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
.modal-dialog-scrollableக்கு சேர்ப்பதன் மூலம் மாதிரி உடலை உருட்ட அனுமதிக்கும் ஸ்க்ரோல் செய்யக்கூடிய மாதிரியையும் நீங்கள் உருவாக்கலாம் .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
செங்குத்தாக மையமாக
மாதிரியை செங்குத்தாக மையத்தில் சேர் .modal-dialog-centered..modal-dialog
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்கள்
உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்கள் தேவைக்கேற்ப மாதிரிகளுக்குள் வைக்கப்படலாம். மாதிரிகள் மூடப்படும் போது, ஏதேனும் உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்கள் தானாகவே நிராகரிக்கப்படும்.
பூட்ஸ்டார்ப் கிரிட் சிஸ்டத்தை ஒரு மாதிரிக்குள் கூடு கட்டுவதன் மூலம் .container-fluidபயன்படுத்தவும் .modal-body. பிறகு, நீங்கள் வேறு எங்கும் செய்வது போல் சாதாரண கிரிட் சிஸ்டம் வகுப்புகளைப் பயன்படுத்தவும்.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
மாறுபட்ட மாதிரி உள்ளடக்கம்
சற்றே வித்தியாசமான உள்ளடக்கங்களைக் கொண்ட ஒரே மாதிரியைத் தூண்டும் பொத்தான்கள் உள்ளனவா? எந்த பொத்தான் கிளிக் செய்யப்பட்டது என்பதைப் பொறுத்து மாதிரியின் உள்ளடக்கங்களை மாற்ற event.relatedTarget, HTML data-*பண்புக்கூறுகள் (ஒருவேளை jQuery வழியாக இருக்கலாம்) பயன்படுத்தவும்.
கீழே ஒரு நேரடி டெமோ உள்ளது, அதைத் தொடர்ந்து HTML மற்றும் ஜாவாஸ்கிரிப்ட். மேலும் தகவலுக்கு, விவரங்களுக்கு மாதிரி நிகழ்வுகளின் ஆவணத்தைப் படிக்கவும்relatedTarget .
New message
அனிமேஷனை மாற்றவும்
மாடல் ஃபேட்- இன் அனிமேஷனுக்கு முன் $modal-fade-transformஉருமாற்ற நிலையை மாறி தீர்மானிக்கிறது, மாடல் ஃபேட்-இன் அனிமேஷனின் முடிவில் மாறக்கூடிய மாற்றத்தை மாறி தீர்மானிக்கிறது ..modal-dialog$modal-show-transform.modal-dialog
உதாரணமாக ஜூம்-இன் அனிமேஷனை நீங்கள் விரும்பினால், நீங்கள் அமைக்கலாம் $modal-fade-transform: scale(.8).
அனிமேஷனை அகற்று
பார்ப்பதற்கு மங்காமல் வெறுமனே தோன்றும் மாதிரிகளுக்கு, .fadeஉங்கள் மாதிரி மார்க்அப்பில் இருந்து வகுப்பை அகற்றவும்.
டைனமிக் உயரங்கள்
ஒரு மாதிரி திறந்திருக்கும் போது அதன் உயரம் மாறினால், $('#myModal').modal('handleUpdate')ஒரு ஸ்க்ரோல்பார் தோன்றினால், மாதிரியின் நிலையை மறுசீரமைக்க நீங்கள் அழைக்க வேண்டும்.
அணுகல்
aria-labelledby="..."மாதிரித் தலைப்பைக் குறிப்பிட்டு, க்கு சேர்க்க வேண்டும் .modal. கூடுதலாக, உங்கள் மாதிரி உரையாடலின் விளக்கத்தை on உடன் aria-describedbyகொடுக்கலாம் .modal. role="dialog"ஜாவாஸ்கிரிப்ட் வழியாக நாங்கள் ஏற்கனவே சேர்த்திருப்பதால் நீங்கள் சேர்க்க வேண்டியதில்லை என்பதை நினைவில் கொள்ளவும் .
மாதிரிகள் மூன்று விருப்ப அளவுகளைக் கொண்டுள்ளன, அவை மாற்றியமைக்கும் வகுப்புகள் மூலம் கிடைக்கின்றன .modal-dialog. குறுகலான வியூபோர்ட்களில் கிடைமட்ட ஸ்க்ரோல்பார்களைத் தவிர்க்க, இந்த அளவுகள் சில பிரேக் பாயிண்ட்களில் கிக் இன் செய்கின்றன.
அளவு
வர்க்கம்
மாதிரி அதிகபட்ச அகலம்
சிறிய
.modal-sm
300px
இயல்புநிலை
இல்லை
500px
பெரியது
.modal-lg
800px
கூடுதல் பெரியது
.modal-xl
1140px
மாற்றியமைக்கும் வகுப்பு இல்லாத எங்கள் இயல்புநிலை மாதிரியானது "நடுத்தர" அளவு மாதிரியை உருவாக்குகிறது.
Extra large modal
...
Large modal
...
Small modal
...
பயன்பாடு
மாதிரி சொருகி, தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் உங்கள் மறைக்கப்பட்ட உள்ளடக்கத்தை தேவைக்கேற்ப மாற்றுகிறது. இது இயல்புநிலை ஸ்க்ரோலிங் நடத்தையை மேலெழுதச் சேர்க்கிறது மற்றும் .modal-openமாதிரிக்கு வெளியே கிளிக் செய்யும் போது காட்டப்படும் மாடல்களை நிராகரிப்பதற்கான ஒரு கிளிக் பகுதியை உருவாக்குகிறது.<body>.modal-backdrop
தரவு பண்புக்கூறுகள் மூலம்
ஜாவாஸ்கிரிப்ட் எழுதாமல் ஒரு மாதிரியை இயக்கவும். data-toggle="modal"ஒரு பொத்தான் போன்ற ஒரு கட்டுப்படுத்தி உறுப்பை அமைக்கவும் data-target="#foo"அல்லது href="#foo"ஒரு குறிப்பிட்ட மாதிரியை குறிவைத்து மாற்றவும்.
ஜாவாஸ்கிரிப்ட் வழியாக
myModalஜாவாஸ்கிரிப்ட்டின் ஒற்றை வரியுடன் ஐடியுடன் ஒரு மாதிரியை அழைக்கவும் :
விருப்பங்கள்
தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-backdrop="".
பெயர்
வகை
இயல்புநிலை
விளக்கம்
பின்னணி
பூலியன் அல்லது சரம்'static'
உண்மை
மாதிரி-பின்னணி உறுப்பை உள்ளடக்கியது. மாற்றாக, staticகிளிக்கில் மாதிரியை மூடாத பின்னணியைக் குறிப்பிடவும்.
விசைப்பலகை
பூலியன்
உண்மை
தப்பிக்கும் விசையை அழுத்தும் போது மாதிரியை மூடுகிறது
கவனம்
பூலியன்
உண்மை
துவக்கும்போது மாதிரியில் கவனம் செலுத்துகிறது.
நிகழ்ச்சி
பூலியன்
உண்மை
துவக்கும்போது மாதிரியைக் காட்டுகிறது.
முறைகள்
ஒத்திசைவற்ற முறைகள் மற்றும் மாற்றங்கள்
அனைத்து API முறைகளும் ஒத்திசைவற்றவை மற்றும் மாற்றத்தைத் தொடங்குகின்றன . மாற்றம் தொடங்கப்பட்டவுடன், ஆனால் அது முடிவதற்குள் அவர்கள் அழைப்பாளரிடம் திரும்புகிறார்கள் . கூடுதலாக, மாற்றும் கூறுகளின் முறை அழைப்பு புறக்கணிக்கப்படும் .
உங்கள் உள்ளடக்கத்தை ஒரு மாதிரியாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது object.
.modal('toggle')
ஒரு மாதிரியை கைமுறையாக மாற்றுகிறது. மாடல் உண்மையில் காட்டப்படுவதற்கு அல்லது மறைக்கப்படுவதற்கு முன் அழைப்பாளருக்குத் திரும்பும் (அதாவது நிகழ்வு shown.bs.modalஅல்லது hidden.bs.modalநிகழ்வு நிகழும் முன்).
.modal('show')
ஒரு மாதிரியை கைமுறையாக திறக்கிறது. மாடல் உண்மையில் காட்டப்படுவதற்கு முன்பு (அதாவது shown.bs.modalநிகழ்வு நிகழும் முன்) அழைப்பாளருக்குத் திரும்புகிறது.
.modal('hide')
ஒரு மாதிரியை கைமுறையாக மறைக்கிறது. மாடல் உண்மையில் மறைக்கப்படுவதற்கு முன்பு அழைப்பாளருக்குத் திரும்பும் (அதாவது hidden.bs.modalநிகழ்வு நிகழும் முன்).
.modal('handleUpdate')
ஒரு மாதிரி திறந்திருக்கும் போது அதன் உயரம் மாறினால் (அதாவது ஸ்க்ரோல்பார் தோன்றினால்) மொடலின் நிலையை கைமுறையாக மறுசீரமைக்கவும்.
.modal('dispose')
ஒரு தனிமத்தின் மாதிரியை அழிக்கிறது.
நிகழ்வுகள்
பூட்ஸ்டார்ப்பின் மாடல் கிளாஸ், மாதிரி செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது. அனைத்து மாதிரி நிகழ்வுகளும் மாதிரியிலேயே சுடப்படுகின்றன (அதாவது இல் <div class="modal">).
நிகழ்வு வகை
விளக்கம்
show.bs.மாதிரி
showநிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது . ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு relatedTargetநிகழ்வின் சொத்தாகக் கிடைக்கும்.
காட்டப்பட்டுள்ளது.பிஎஸ்.மாதிரி
மாடல் பயனருக்குத் தெரியும் போது இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்). ஒரு கிளிக் காரணமாக ஏற்பட்டால், கிளிக் செய்யப்பட்ட உறுப்பு relatedTargetநிகழ்வின் சொத்தாகக் கிடைக்கும்.
hide.bs.modal
hideநிகழ்வு முறை அழைக்கப்பட்டவுடன் இந்த நிகழ்வு உடனடியாக நீக்கப்படும் .
மறைக்கப்பட்ட.bs.மாதிரி
மாடல் பயனரிடமிருந்து மறைத்து முடிந்ததும் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடிவடையும் வரை காத்திருக்கும்).
hidePrevented.bs.modal
மாதிரி காட்டப்படும் போது இந்த நிகழ்வு நீக்கப்படும், அதன் பின்னணி staticமற்றும் மாதிரிக்கு வெளியே ஒரு கிளிக் செய்யவும் அல்லது விசைப்பலகை விருப்பத்துடன் எஸ்கேப் கீ அழுத்தவும் அல்லது data-keyboardக்கு அமைக்கப்படும் false.