জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি keyup() মেথড

« জেকুয়েরি ইভেন্ট মেথডসমুহ



সংজ্ঞা এবং ব্যবহার

keyup ইভেন্টের সাথে সম্পর্কিত ইভেন্টের ধাপগুলো:

  1. keydown - যখন কী নিচের দিকে নামতে থাকে
  2. keypress - যখন কী নিচে চাপ দেওয়া হয়
  3. 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>
 

ফলাফল




« জেকুয়েরি ইভেন্ট মেথডসমুহ