ڈیٹا کی توثیق اور تصدیق جیسے منظرناموں میں، جب بھی صارف کی بورڈ سے واحد دبائی ہوئی کلید جاری کرتا ہے تو فیلڈ عناصر کا اسٹائل تبدیل ہوجاتا ہے۔ اسٹائل کی یہ تبدیلی ہر کلیدی پریس یا ریلیز کے حوالے سے jQuery کے فراہم کردہ ایونٹ ہینڈلرز کے ذریعے کی جاتی ہے۔ مخصوص ہونے کے لیے، ایونٹ ہینڈلر یا طریقہ جو کسی بھی دبائی ہوئی کلید کے جاری ہونے پر فنکشن کو ڈیل کرتا ہے یا اس کی درخواست کرتا ہے وہ ہے ' keyup ()' طریقہ۔
دوسری طرف، وہ طریقہ جو فنکشن کی کو ہینڈل کرتا ہے یا اس کو دباتا ہے وہ ہے ' keydown ()' طریقہ اور آپ ہمارے منسلک کو چیک کر سکتے ہیں۔ مضمون اس تقریب کے لیے.
اس بلاگ میں، ہم jQuery keyup() طریقہ کی ایک مختصر تفصیل فراہم کریں گے۔
jQuery keyup() طریقہ استعمال کیسے کریں؟
jQuery ' keyup ()' طریقہ گمنام فنکشن کو متحرک کرتا ہے جب بھی صارف منتخب فیلڈ کے اندر کیز کو دبانا یا داخل کرنا چھوڑ دیتا ہے۔ یہ طریقہ ریئل ٹائم میں منتخب عنصر پر ڈائنامک اسٹائل لگانے کے لیے بھی استعمال ہوتا ہے۔
نحو
keyup() jQuery طریقہ کے لیے استعمال ہونے والا نحو درج ذیل ہے:
$ ( 'یہ' ) . keyup ( customFunc )
مندرجہ بالا نحو میں، ' یہ ' منتخب HTML عنصر ہے، اور ' customFunc 'ایک فنکشن ہے جو 'کے ذریعہ انجام دیا جاتا ہے۔ keyup 'طریقہ کار' یہ '
آئیے گہرائی سے سمجھنے کے لیے چند مثالیں پیش کرتے ہیں۔
مثال 1: 'keyup()' طریقہ استعمال کرتے ہوئے متن کا رنگ تبدیل کرنا
اس صورت میں، درج کردہ متن کا رنگ مختلف رنگ میں تبدیل ہو جائے گا جب صارف پہلے سے دبائی ہوئی کلید کو جاری کرے گا جیسا کہ ذیل میں دکھایا گیا ہے:
< html >
< سر >
< سکرپٹ src = 'https://code.jquery.com/jquery-3.7.0.js' >< / سکرپٹ >
< سکرپٹ >
$(دستاویز) ریڈی(فنکشن() {
$('#demo').keyup(function() {
$('#demo').css('رنگ'، 'فاریسٹ گرین')؛
});
});
< / سکرپٹ >
< / سر >
< جسم >
< div >
Linuxhint ڈیٹا درج کریں: < ان پٹ آئی ڈی = 'ڈیمو' قسم = 'متن' / >
< / div >
< / جسم >
< / html >
مندرجہ بالا کوڈ کی تفصیل درج ذیل ہے:
- سب سے پہلے، اس پر جا کر اس کا آن لائن CDN داخل کر کے پروجیکٹ میں jQuery درآمد کریں۔ لنک سرکاری دستاویزات کی.
- اگلا، ایک گمنام فنکشن بنائیں جسے اس وقت بلایا جائے گا جب ' دستاویز یا صفحہ لوڈ ہو جاتا ہے۔ یہ فنکشن 'ڈیمو' کی آئی ڈی کے ساتھ HTML عنصر کو منتخب کرتا ہے اور منسلک کرتا ہے ' keyup ()' اس کے ساتھ طریقہ۔
- ' keyup ()' طریقہ کال بیک فنکشن کو طلب کرتا ہے جو استعمال کرتا ہے ' سی ایس ایس ()' ٹیکسٹ کے فونٹ کا رنگ سیٹ کرنے کے لیے ' جنگل سبز '
- اب، منتخب '< بنائیں ان پٹ >' عنصر '< کے اندر جسم >' ٹیگ کریں اور اسے 'کی آئی ڈی تفویض کریں ڈیمو '
تالیف کے عمل کی تکمیل کے بعد ویب پیج کا پیش نظارہ:
آؤٹ پٹ متن کا رنگ دکھاتا ہے جب منتخب کلید جاری کی جاتی ہے۔
مثال 2: پس منظر کا رنگ متحرک طور پر تبدیل کرنا
اس مثال میں، منتخب کردہ HTML عنصر کے لیے مختلف پس منظر کے رنگ سیٹ کیے جائیں گے جب بھی صارف دبائی ہوئی کلید کو چھوڑے گا۔ آئیے اس منظر نامے کے کوڈ پر ایک نظر ڈالتے ہیں:
< سر >< سکرپٹ src = 'https://code.jquery.com/jquery-3.7.0.js' >< / سکرپٹ >
< سکرپٹ >
پس منظر کے شیڈز ہونے دیں۔ = [ 'ایکوامیرین' , 'سنتری والا' , 'کیڈٹ بلیو' , 'جنگل سبز' ,
'ہلکا خاکہ' , 'سینڈی براؤن' , 'مینجینٹا' , 'برلی ووڈ' ] ;
دو جے = 0 ;
$ ( دستاویز ) .keyup ( فنکشن ( تقریب ) {
$ ( '#hgg' ) .css ( 'پس منظر کا رنگ' پس منظر کے شیڈز [ جے ] ) ;
j++;
جے = j % 9 ;
} ) ;
< / سکرپٹ >
< / سر >
< جسم >
< h1 انداز = 'رنگ: سمندری سبز' >Linuxhint آرٹیکل< / h1 >< بی آر >
< div آئی ڈی = 'hgg' انداز = 'پیڈنگ: 10px' >
< h2 > jQuery کی اپ مختلف سیٹ کرنے کے لیے استعمال کیا جاتا ہے۔ پس منظر ہر بار جب کلید جاری کی جاتی ہے۔< / h2 >
< بی آر / >
< / div >
< / جسم >
مندرجہ بالا کوڈ کی تفصیل:
- ابتدائی طور پر، jQuery کو اپنے پروجیکٹ میں jQuery CDN شامل کرکے درآمد کریں < سر >' ٹیگ۔
- پھر، نام کی ایک صف بنائیں۔ پس منظر کے شیڈز ” جس میں آٹھ بے ترتیب رنگ ہوتے ہیں۔
- اگلا، ' keyup ()' طریقہ 'کے ساتھ منسلک ہے دستاویز اور یہ ایک گمنام کال بیک فنکشن کو طلب کرتا ہے۔ یہ فنکشن HTML عنصر کا انتخاب کرتا ہے جس کی id ' hgg 'اور CSS کا اطلاق کرتا ہے' پس منظر کا رنگ ' جائیداد.
- صف ' پس منظر کے شیڈز 'CSS خصوصیات کی قدر کے طور پر پاس کیا جاتا ہے اور انڈیکس کو ' جے متغیر یہ متغیر ہر بار ایک سے بڑھتا ہے اور 'سے دوبارہ شروع ہوتا ہے 0 'انڈیکس جب قیمت تک پہنچ جائے' 8 ' کیونکہ صف میں زیادہ سے زیادہ انڈیکس ہے ' 7 '
- اس کے بعد، ایک منتخب ' div ' کی شناخت کے ساتھ عنصر ' hgg ”، اس عنصر کا پس منظر کا رنگ تبدیل ہو جائے گا جب دبائی ہوئی کلید جاری ہو جائے گی۔
تالیف کے بعد ویب صفحہ کا جائزہ:
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ منتخب کردہ HTML عنصر کے پس منظر کا رنگ ہر بار جب دبایا گیا یا منتخب کلید جاری ہوتا ہے تبدیل ہوتا ہے۔ یہ سب کچھ استعمال کرنے کے بارے میں ہے ' keyup ()' طریقہ۔
نتیجہ
jQuery ' keyup ()' طریقہ منتخب کردہ HTML عنصر پر کال بیک فنکشن کو متحرک کرتا ہے جب دبائی ہوئی کلید جاری کی جاتی ہے۔ یہ طریقہ اس وقت کال نہیں کرتا جب کلید دبائی جا رہی ہو لیکن ریلیز کے وقت یا کی اپ پر یہ فنکشن کال بیک فنکشن کو انجام دیتا ہے۔ اس بلاگ نے jQuery keyup() طریقہ کے استعمال اور کام کی وضاحت کی ہے۔