3

Estava querendo executar uma função no Javascript quando o dropdown perdesse o foco.

Estou fazendo dessa maneira, utilizando onBlur, e não está dando certo:

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>

Se alguém souber porque não está dando certo, me ajude...

7
  • Como fica o HTML disso? 6/10/2015 às 16:59
  • ja tentou alterar o onBlur para onblur? w3schools.com/jsref/event_onblur.asp 6/10/2015 às 17:01
  • Ja pensou em usar outro evento? tipo um onclick no elemento da frente? Como o @CiganoMorrisonMendez disse ai, poste o html deste bicho ai para analisarmos melhor. 6/10/2015 às 17:02
  • Postei o HTML...
    – Italo
    6/10/2015 às 17:06
  • Já tentei os dois jeitos @GuilhermeLautert.
    – Italo
    6/10/2015 às 17:08

3 Respostas 3

6

Não existe nada errado com seu código. Pode ser apenas a ordem ou o momento que você está chamando o mesmo.

<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>

Apenas um exemplo utilizando 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>

Apenas verifique o momento que sua função está sendo "carregada" no navegador, isso pode estar ocasionando problemas.

Fiddle - JavaScript
Fiddle - jQuery

8
  • Por incrível que pareça no IE funciona, já no Firefox e Chrome não.
    – Italo
    6/10/2015 às 18:28
  • @Italo A minha resposta ou quando você adiciona em seu código?
    – Randrade
    6/10/2015 às 18:33
  • Quando eu rodo o meu código @Randrade.
    – Italo
    6/10/2015 às 18:51
  • Isso é algo com o seu código. Aparece algum erro no console do navegador?
    – Randrade
    6/10/2015 às 18:56
  • Parece não, e fui debbugando no F12 e não aparece nenhum erro.
    – Italo
    6/10/2015 às 18:59
4

Seu código está funcionando sem problemas. Acredito que o comportamento que você esperar não é o que o método faz. Como sugestão, você pode rodar no onchange os dois metódos. Veja:

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>

4

Italo, sempre separe comportamento do HTML. Ao passo que você começar a fazer isso, verá que dúvidas no estilo "Porque XXXX não está executando" irão diminuir naturalmente.

No seu exemplo:

Inclua uma tag script no final do html e faça algo como:

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>

2
  • Eu colocaria dentro de uma $(document).ready(function ()?
    – Italo
    6/10/2015 às 18:54
  • Sim, também pode ser.
    – Cleiton
    6/10/2015 às 20:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .