onfocus ইভেন্ট
পরিভাষা ও ব্যবহার
onfocus ইভেন্ট ইলেকট্রন ফোকাস হওয়ার সময় ঘটে
onfocus ইভেন্ট সবচেয়ে বেশি <input>、<select> এবং <a> সঙ্গে ব্যবহৃত হয়
পরামর্শ: onfocus ইভেন্ট এবং onblur ইভেন্টবিপরীত
পরামর্শ: onfocus ইভেন্ট অনুরূপ onfocusin ইভেন্ট。মূল পার্থক্য এটা যে onfocus ইভেন্ট নিবারণ হয় না। তাই, একটি ইলেকট্রনের বা তার সাব-ইলেকট্রন ফোকাস হয়নি তা নিশ্চিত করতে onfocusin ইভেন্ট ব্যবহার করতে পারেন। কিন্তু, onfocus ইভেন্টকে addEventListener() মথুরার useCapture এটা করতে পারার জন্য পারামিটার ব্যবহার করুন。
প্রতিদর্শন
উদাহরণ 1
ইনপুট ফিল্ড ফোকাস হওয়ার সময় জাভাস্ক্রিপ্ট চালু করুন:
<input type="text" onfocus="myFunction()">
পাতার নিচে আরও TIY উদাহরণ আছে。
সাংকেতিকা
এইচটিএমএল-এর মধ্যে:
<element onfocus="myScript">
জাভাস্ক্রিপ্টের মধ্যে:
object.onfocus = function(){myScript};
জাভাস্ক্রিপ্টের মধ্যে, addEventListener() মথুরা ব্যবহার করে:
object.addEventListener("focus", myScript);
মন্তব্য:ইন্টারনেট এক্সপ্লোরার 8 বা আরও পুরানো সংস্করণ এটা সমর্থন করে না addEventListener() মথুরা。
Technical details
| Bubble: | Not supported |
|---|---|
| Cancelable: | Not supported |
| Event type: | FocusEvent |
| Supported HTML tags: | All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <title> |
| DOM version: | Level 2 Events |
Browser support
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocus | Supported | Supported | Supported | Supported | Supported |
More examples
Example 2
Use "onfocus" and "onblur" events together:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Example 3
Clear the focused input field:
/* When the input field gets focus, replace its current value with an empty string */ <input type="text" onfocus="this.value=''" value="Blabla">
Example 4
event delegation: set the useCapture parameter of addEventListener() to true:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Example 5
event delegation: using focusin event (not supported in Firefox):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
