jQuery keyup() முறையை எவ்வாறு பயன்படுத்துவது?

தரவு சரிபார்ப்பு மற்றும் சரிபார்ப்பு போன்ற சூழ்நிலைகளில், விசைப்பலகையில் இருந்து பயனர் ஒற்றை அழுத்தும் விசையை வெளியிடும் போதெல்லாம் புல உறுப்புகளின் ஸ்டைலிங் மாற்றப்படும். ஒவ்வொரு கீ பிரஸ் அல்லது வெளியீட்டிற்கும் தொடர்புடைய இந்த ஸ்டைலிங் மாற்றம் jQuery வழங்கும் நிகழ்வு ஹேண்ட்லர்கள் மூலம் செய்யப்படுகிறது. குறிப்பிட்டதாகச் சொல்வதென்றால், எந்த அழுத்தப்பட்ட விசையும் வெளியிடப்படும்போது செயல்பாட்டைக் கையாளும் அல்லது செயல்படுத்தும் நிகழ்வு கையாளுதல் அல்லது முறை ' கீஅப் ()” முறை.

மறுபுறம், செயல்பாட்டு விசையை அழுத்தும் போது கையாளும் அல்லது செயல்படுத்தும் முறை ' கீ டவுன் ()” முறை மற்றும் எங்களுடன் தொடர்புடையதை நீங்கள் சரிபார்க்கலாம் கட்டுரை இந்த நிகழ்வுக்கு.

இந்த வலைப்பதிவில், jQuery keyup() முறையின் சுருக்கமான விளக்கத்தை வழங்குவோம்.

jQuery keyup() முறையை எவ்வாறு பயன்படுத்துவது?

jQuery' கீஅப் ()” முறையானது, தேர்ந்தெடுக்கப்பட்ட புலத்தில் உள்ள விசைகளை அழுத்துவதை அல்லது உள்ளிடுவதை பயனர் நிறுத்தும் போதெல்லாம் அநாமதேய செயல்பாட்டைத் தூண்டுகிறது. நிகழ்நேரத்தில் தேர்ந்தெடுக்கப்பட்ட உறுப்பு மீது டைனமிக் ஸ்டைலிங்கைப் பயன்படுத்தவும் இந்த முறை பயன்படுத்தப்படுகிறது.

தொடரியல்

கீஅப்() jQuery முறைக்கு பயன்படுத்தப்படும் தொடரியல் பின்வருமாறு:

மேலே உள்ள தொடரியல், “ இது ' என்பது தேர்ந்தெடுக்கப்பட்ட HTML உறுப்பு, மற்றும் ' customFunc ” என்பது ஒரு செயல்பாடால் செயல்படுத்தப்படுகிறது கீஅப் 'மேலும் முறை' இது ”.

ஆழமான புரிதலுக்கு ஓரிரு உதாரணங்களைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: 'கீஅப்()' முறையைப் பயன்படுத்தி உரையின் நிறத்தை மாற்றுதல்

இந்த வழக்கில், கீழே காட்டப்பட்டுள்ளபடி பயனர் ஏற்கனவே அழுத்திய விசையை வெளியிடும் போது உள்ளிட்ட உரையின் நிறம் வேறு நிறத்திற்கு மாற்றப்படும்:

மேலே உள்ள குறியீட்டின் விளக்கம் கீழே குறிப்பிடப்பட்டுள்ளது:

• முதலில், இதைப் பார்வையிடுவதன் மூலம் அதன் ஆன்லைன் CDN ஐச் செருகுவதன் மூலம் திட்டத்தில் jQuery ஐ இறக்குமதி செய்யவும் இணைப்பு அதிகாரப்பூர்வ ஆவணங்கள்.
• அடுத்து, ஒரு அநாமதேய செயல்பாட்டை உருவாக்கவும், அது '' என அழைக்கப்படும். ஆவணம் ” அல்லது பக்கம் ஏற்றப்படும். இந்தச் செயல்பாடு 'டெமோ' என்ற ஐடியுடன் HTML உறுப்பைத் தேர்ந்தெடுத்து 'ஐ இணைக்கிறது. கீஅப் ()” முறை அதனுடன்.
• ' கீஅப் ()' முறையானது ' css ()” உரையின் எழுத்துரு நிறத்தை அமைக்க “ காடுபச்சை ”.
• இப்போது, ​​தேர்ந்தெடுக்கப்பட்ட “< ஐ உருவாக்கவும் உள்ளீடு >” உறுப்பு உள்ளே “< உடல் >' குறிச்சொல்லிட்டு அதற்கு ஒரு ஐடியை ஒதுக்கவும் டெமோ ”.

தொகுத்தல் செயல்முறை முடிந்ததும் வலைப்பக்கத்தின் முன்னோட்டம்:

தேர்ந்தெடுக்கப்பட்ட விசை வெளியிடப்பட்டதும், உரையின் நிறத்தை வெளியீடு காட்டுகிறது.

எடுத்துக்காட்டு 2: பின்னணி நிறத்தை மாறும் வகையில் மாற்றுதல்

இந்த எடுத்துக்காட்டில், பயனர் அழுத்திய விசையை விட்டு வெளியேறும் போதெல்லாம் தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு வெவ்வேறு பின்னணி வண்ணங்கள் அமைக்கப்படும். இந்த சூழ்நிலைக்கான குறியீட்டைப் பார்ப்போம்:

மேலே உள்ள குறியீட்டின் விளக்கம்:

• தொடக்கத்தில், உங்கள் திட்டத்தில் jQuery ஐ இறக்குமதி செய்ய, '<க்குள் jQuery CDN ஐச் சேர்ப்பதன் மூலம் தலை >” குறிச்சொல்.
• பின்னர், '' என்ற வரிசையை உருவாக்கவும் பின்னணி நிழல்கள் ” இதில் எட்டு சீரற்ற வண்ணங்கள் உள்ளன.
• அடுத்து, ' கீஅப் ()' முறை ' உடன் இணைக்கப்பட்டுள்ளது ஆவணம் ” மற்றும் இது ஒரு அநாமதேய அழைப்பு செயல்பாட்டைத் தூண்டுகிறது. இந்த செயல்பாடு HTML உறுப்பை ' என்ற ஐடியுடன் தேர்ந்தெடுக்கிறது hgg 'மற்றும் CSS ஐப் பயன்படுத்துகிறது' பின்னணி நிறம் ”சொத்து.
• வரிசை ' பின்னணி நிழல்கள் ” என்பது CSS பண்புகளுக்கான மதிப்பாக அனுப்பப்பட்டு, குறியீடு “ ஜே ” மாறி. இந்த மாறி ஒவ்வொரு முறையும் ஒன்று அதிகரிக்கப்பட்டு '' இலிருந்து மறுதொடக்கம் செய்யப்படுகிறது 0 'மதிப்பு அடையும் போது குறியீட்டு' 8 ”. ஏனெனில் வரிசையில் உள்ள அதிகபட்ச குறியீடு ' 7 ”.
• அதன் பிறகு, தேர்ந்தெடுக்கப்பட்ட ' div '' என்ற அடையாளத்துடன் கூடிய உறுப்பு hgg ”, அழுத்தப்பட்ட விசை வெளியிடப்படும் போது இந்த உறுப்பின் பின்னணி நிறம் மாற்றப்படும்.

தொகுத்த பிறகு வலைப்பக்கத்தின் முன்னோட்டம்:

ஒவ்வொரு முறையும் அழுத்தப்பட்ட அல்லது தேர்ந்தெடுக்கப்பட்ட விசை வெளியிடப்படும் போது தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கான பின்னணி நிறம் மாறுவதை வெளியீடு உறுதிப்படுத்துகிறது. இதைப் பயன்படுத்துவது பற்றியது ' கீஅப் ()” முறை.

முடிவுரை

jQuery' கீஅப் ()” முறையானது, அழுத்தப்பட்ட விசையை வெளியிடும் போது, ​​தேர்ந்தெடுக்கப்பட்ட HTML உறுப்பில் திரும்ப அழைப்பதற்கான செயல்பாட்டைத் தூண்டுகிறது. இந்த முறை விசையை அழுத்தும் போது அழைக்காது, ஆனால் வெளியிடும் போது அல்லது விசையை இயக்கும் போது இந்த செயல்பாடு ஒரு கால்பேக் செயல்பாட்டை செயல்படுத்துகிறது. jQuery keyup() முறையின் பயன்பாடு மற்றும் செயல்பாட்டை இந்த வலைப்பதிவு விளக்கியுள்ளது.