Why is onBlur not running?

Question

Why is onBlur not running?

Navigation

#1 by (6 votes)
#2 by (4 votes)
#3 by (4 votes)

3

I was wanting to perform a Javascript function when dropdown lost focus.

I'm doing it this way, using onBlur, and it's not working:

function DesabilitaFiltro() {
   alert("ok");
}

<div class="form-group">
   @Html.DropDownList("Severidade", (IEnumerable<SelectListItem>)ViewBag.Severidades, "Severidade", new { @class = "ui fluid search dropdown", style = "width: 100%", multiple = "", onchange = "Filtro()", onBlur="DesabilitaFiltro()" })
</div>

<div class="form-group">
   <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onBlur="DesabilitaFiltro()" onchange="Filtro()" style="width: 100%"><option value="">Severidade</option>
      <option>MEDIA</option>
      <option>ALTA</option>
      <option>BAIXA</option>
      <option>CRITICA</option>
   </select>
</div>

If someone knows why it's not working, help me ...

javascript html c# asp.net-mvc

asked by anonymous 06.10.2015 / 18:57

3 answers

How to use static and global variables in PHP? What is the functionality of \ n?

score 6 · Answer 1

Nothing wrong with your code. It may just be the order or the moment that you are calling it.

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by randrade</title>
<style type="text/css"></style></head>
<body>
  

<div class="form-group">
   <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onblur="DesabilitaFiltro()" onchange="Filtro()" style="width: 100%"><option value="">Severidade</option>
      <option>MEDIA</option>
      <option>ALTA</option>
      <option>BAIXA</option>
      <option>CRITICA</option>
   </select>
</div>

<script>
function DesabilitaFiltro() {
   alert("ok");
}
</script>

</body></html>

Just an example using jQuery:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by randrade</title>

  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script><style type="text/css"></style>
  
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("#Severidade").blur(function(){
    alert("OK");
});
});//]]> 

</script>

</head>
<body>
  <div class="form-group">
   <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onchange="Filtro()" style="width: 100%"><option value="">Severidade</option>
      <option>MEDIA</option>
      <option>ALTA</option>
      <option>BAIXA</option>
      <option>CRITICA</option>
   </select>
</div>
  
</body></html>

Just check the moment your function is being "loaded" in the browser, this can be causing problems.

Fiddle - JavaScript
Fiddle - jQuery

score 4 · Answer 2

Your code is working without problems. I believe that the behavior you expect is not what the method does. As a suggestion, you can run the two methods onchange. See:

function DesabilitaFiltro() {
  alert("ok");
}

<div class="form-group">
  <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onchange="DesabilitaFiltro();Filtro();" style="width: 100%">
    <option value="">Severidade</option>
    <option>MEDIA</option>
    <option>ALTA</option>
    <option>BAIXA</option>
    <option>CRITICA</option>
  </select>
</div>

score 4 · Answer 3

Italo, always separate behavior from HTML. As you begin to do this, you'll see that doubts in the "Why XXXX is not running" style will naturally decrease.

In your example:

Include a script tag at the end of the html and do something like:

var el = document.querySelector('#Severidade');
el.addEventListener('change', function alterouFiltro() {
  console.log('alterado');
}, false);

el.addEventListener('blur', function focoFiltro() {
  console.log('perdeu o foco');
}, false);

<select id="Severidade">
  <option>Opção 1</option>
  <option>Opção 2</option>
  <option>Opção 3</option>
</select>