CODEWITHSUNDEEP
javascripthtml
user14466490
user14466490

Reputation:

Why the event blur is not working with the function name blur?

When I am trying to add event (particular "blur") to HTML with the same function name blur why it is not working but when I am taking another function name like blurf or abc

function abc(element){
  element.style.background="lime"
}
function blur(element){
  element.style.background=""
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <form action="">
    <label for="">Name</label> <input type="text" id="fname" onfocus="abc(this)" onblur="blur(this)">
    <br><br>
    <label for="">class</label> <input type="text" onfocus="abc(this)" onblur="blur(this)">
    <br><br>
    <label for="">Country</label>
    <select name="" id="">
      <option value="">Pakistan</option>
      <option value="">India</option>
      <option value="">America</option>
      <option value="">China</option>
    </select>
      
    </form>
  
</body>
</html>

or any other name it starts working. can anybody tell me why?

Upvotes: 1

Views: 241

Answers (2)

guyaloni
guyaloni

Reputation: 5872

There is a much elegant solution for it - instead of using javascript, use css pseudo-class focus:

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

In your case:

.lime-focused-input:focus {
    background:lime;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <form action="">
    <label for="">Name</label> <input type="text" id="fname" class="lime-focused-input">
    <br><br>
    <label for="">class</label> <input type="text" class="lime-focused-input">
    <br><br>
    <label for="">Country</label>
    <select name="" id="">
      <option value="">Pakistan</option>
      <option value="">India</option>
      <option value="">America</option>
      <option value="">China</option>
    </select>
  </form>
</body>
</html>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

I guess if you are trying to change the background try with transparent and also, don't use blur, it's a conflicting keyword (see below for reason):

function abc(element) {
  element.style.background = "lime";
}

function aaa(element) {
  element.style.backgroundColor = "transparent";
}
<form action="">
  <label for="">Name</label> <input type="text" id="fname" onfocus="abc(this)" onblur="aaa(this)">
  <br><br>
  <label for="">class</label> <input type="text" onfocus="abc(this)" onblur="aaa(this)">
  <br><br>
  <label for="">Country</label>
  <select name="" id="">
    <option value="">Pakistan</option>
    <option value="">India</option>
    <option value="">America</option>
    <option value="">China</option>
  </select>
</form>

By default, the scope is window scope and window.blur() or blur() is an event handler of window object and that cannot be overridden.

enter code here

So you cannot override any of these window related properties.

Upvotes: 0

Related Questions