জেকুয়েরি keyup() মেথড
সংজ্ঞা এবং ব্যবহার
keyup ইভেন্টের সাথে সম্পর্কিত ইভেন্টের ধাপগুলো:
- keydown - যখন কী নিচের দিকে নামতে থাকে
- keypress - যখন কী নিচে চাপ দেওয়া হয়
- keyup - যখন কী ছেড়ে দেওয়া হয়
কীবোর্ড-কী চাপ দেওয়া থেকে ছেড়ে দিলে keyup ইভেন্ট ঘটে।
keyup() মেথড keyup ইভেন্ট ট্রিগার করে, অথবা keyup ইভেন্ট ঘটলে রান করার জন্য একটি ফাংশন যুক্ত করে।
টিপস: কীবোর্ডের কোন কী কোনটি চাপ দেওয়া হয়েছে event.which প্রোপার্টির মাধ্যমে তা রিটার্ন করা যায়।
সিনট্যাক্স ও ব্যাখ্যা
নির্বাচিত এলিমেন্টের জন্য keyup ইভেন্ট ট্রিগার:
$(selector).keyup()
keyup ইভেন্টে একটি ফাংশন যোগ:
$(selector).keyup(function)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে keyup() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | ঐচ্ছিক। keyup ইভেন্ট ঘটলে যে ফাংশনটি রান হবে তা নির্দেশ করে। |
keyup() মেথড সংক্রান্ত উদাহরণ
কীবোর্ড-কী চাপ দেওয়া থেকে ছেড়ে দিলে একটি <input> ফিল্ডের ব্যাকগ্রাউন্ড কালার পরিবর্তন হবে তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "green");
});
$("input").keyup(function(){
$("input").css("background-color", "red");
});
});
</script>
</head>
<body>
আপনার নাম দিন: <input type="text">
<p>উপরে ইনপুট ফিল্ডে আপনার নাম লিখুন। এটা keydown এবং keyup উপর ব্যাকগ্রউন্ড-কালার পরিবর্তন করতে পারে।</p>
</body>
</body>
</html>
ফলাফল
কোন কী চাপ দেওয়া হয়েছে জানুন
কিভাবে event.which প্রোপার্টির মাধ্যমে কোন কী চাপ দেওয়া হয়েছে জানতে পারেন।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "green");
});
$("input").keyup(function(){
$("input").css("background-color", "red");
});
});
</script>
</head>
<body>
আপনার নাম দিন: <input type="text">
<p>উপরে ইনপুট ফিল্ডে আপনার নাম লিখুন। এটা keydown এবং keyup উপর ব্যাকগ্রউন্ড-কালার পরিবর্তন করতে পারে।</p>
</body>
</body>
</html>
ফলাফল
নির্বাচিত এলিমেন্টের জন্য keyup ইভেন্ট ট্রিগার:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "green");
});
$("input").keyup(function(){
$("input").css("background-color", "blue");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
</head>
<body>
<input type="text">
<p><button id="btn1"> ইনপুট ফিল্ডের জন্য keydown ইভেন্ট ট্রিগার চাপুন</button></p>
<p><button id="btn2"> ইনপুট ফিল্ডের জন্য keyup ইভেন্ট ট্রিগার চাপুন।</button></p>
</body>
</html>
ফলাফল
keyup ইভেন্টে একটি ফাংশন যোগ:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "teal");
});
$("input").keyup(function(){
$("input").css("background-color", "aqua");
});
});
</script>
</head>
<body>
আপনার নাম দিন: <input type="text">
<p>
উপরে ইনপুট ফিল্ডে আপনার নাম লিখুন। এটা keydown এবং keyup উপর ব্যাকগ্রউন্ড-কালার পরিবর্তন করতে পারে।</p>
</body>
</html>
ফলাফল