Blur/Onblur not doing anything

Question

I've been trying to change the border-color of a textarea when the focus gets out, but it's not doing anything, not even if I'm only trying to alert something.

These are the methods I've tried so far:

The first:

$('#idname').on('blur', function() {
     alert(1);
});

The second:

document.getElementById('idname').onblur() = function () {
     alert(1);
}

The third:

function redBlur() {
     alert(1);
}

And the html:

<textarea rows="1" cols="10" type="email" id="idname" name="title" onblur="redBlur()"></textarea>

$('#idname').on('blur', function() {
     alert(1);
});

document.getElementById('idname').onblur() = function () {
     alert(1);
}
function redBlur() {
     alert(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="1" cols="10" type="email" id="idname" name="title" onblur="redBlur()"></textarea>

Do you have any idea as to what I'm doing wrong?

Thanks.

What does your HTML look like? And is your JavaScript being loaded after your HTML or wrapped in an on ready block? — fubar, Feb 16 '17 at 11:51
You don't need JS to change the border color of an element on focus/blur - CSS can do that: https://jsfiddle.net/b1wfzhwn/ — Rory McCrossan, Feb 16 '17 at 11:52
Make sure you have the jquery library loaded correctly and you don't have errors in the console. — Dekel, Feb 16 '17 at 11:57
The element has the same id, and the javascript is wrapped in an on ready block before the html. — couchPotato, Feb 16 '17 at 11:57
The CSS doesn't help because I don't want the alert/border color change before the focus gets on the input at least once. — couchPotato, Feb 16 '17 at 11:59
First `.onBlur()=...` is wrong. Second, when you use script to add handlers, make sure, your DOM is rendered before. But when you do `obBlur="..."` then your script should render before and function should be globally accessible. Try using a delegate: `$(document).bind("eventName", "#id", function(){ ... })` — Rajesh, Feb 16 '17 at 12:00

score 0 · Answer 1 · answered Feb 16 '17 at 11:53

0

In the second example, you need to remove the parentheses after the onblur, otherwise it's trying to invoke the existing handler rather than assigning a new handler. It's also unusual to chain methods directly after using getElementById. Try this:

var field = document.getElementById('idname');
field.addEventListener('blur', function () {
     alert(1);
});

answered Feb 16 '17 at 11:53

danwellman

9,068
8
60
88

I tried both to simply remove the parantheses and to assign the element to a variable first like in your example, but it didn't work either way... Thanks for the answer though – couchPotato Feb 16 '17 at 12:03

score 0 · Answer 2 · answered Feb 16 '17 at 12:46

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <textarea id="test"></textarea>
    <script>
            $(function(){
            $('#test').on('blur', function (){
                    $('#test').css('border-color', 'red');
                });
            });
        });
    </script>
</body>
</html>

Blur/Onblur not doing anything

2 Answers2