برداشتن تمرکز (Focus) از روی یک عنصر (Element)، با روش blur ، در JavaScript
با استفاده از روش
blur در JavaScript ، می توانیم تمرکز (Focus) را از روی یک عنصر (Element) برداریم.
به عنوان مثال، اگر یک عنصر با id برابر
kelidestan داشته باشیم و بخواهیم تمرکز (Focus) را از روی آن برداریم، آنگاه کد JavaScript زیر را می نویسیم :
xxxxxxxxxxdocument.getElementById("kelidestan").blur();به مثال زیر توجه کنید :
یک عنصر
input در صفحه قرار می دهیم و همچنین دو دکمه (Button) می سازیم، که با کلیک بر روی یک دکمه (Button)، تمرکز (Focus) بر روی عنصر
input قرار گیرد و با کلیک بر روی دکمه (Button) دیگر، تمرکز (Focus) از روی آن برداشته شود :
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <style> input:focus { background-color: yellow; } </style> </head> <body> <input id="my_input" type="text" value="kelidestan.com"> <br><br> <button type="button" onclick="Get_Focus()">Get Focus</button> <button type="button" onclick="Lose_Focus()">Lose Focus</button> <script> function Get_Focus() { document.getElementById("my_input").focus(); } function Lose_Focus() { document.getElementById("my_input").blur(); } </script> </body></html>
با کد CSS زیر تعیین کرده ایم که وقتی تمرکز (Focus) بر روی عنصر
input قرار دارد، پس زمینه (Background) آن به رنگ زرد (yellow) نمایش داده شود :
xxxxxxxxxxinput:focus { background-color: yellow;}نتیجه :
برای قرار دادن تمرکز (Focus) بر روی یک عنصر (Element)، روش
focus در JavaScript به کار می رود (
آموزش شماره 27637 ).
