Enlever le focus d'un bootstrap-select

Bonjour,

Pour enlever le focus d'un bootstrap-select qui est un plug-in bootstrap, j'utilise un tag anchor qui se trouve en haut de page et résultat, la page monte toute seule tout en haut.

Le select est écrit comme ceci:

Code:

---

1 2 3 4

<select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address"> <option id="1" value="1" selected >First address</option> <option id="2" value="2" >Second address</option> </select>

---

et le jquery:

Code:

---

1 2 3 4

$("#SelectAddress").on("change", function() { //...mycode... $("#AFocus").focus(); });

---

J'ai mis en ligne un exemple ici pour faire des tests: http://jsfiddle.net/ya0o7hzb/ Il faut scroller la page vers le bas pour voir le select.

Comment je peux enlever le focus sans utiliser de tag Anchor?

Merci,
Vincent.

Code:

---

$(this).blur()

---

Malheureusement .blur() ne fonctionne pas avec un selectpicker: http://jsfiddle.net/a5qofo87/

Si le blur() ne fonctionne pas c'est que ce plugin bootstrap va ajouter ce code:

Code:

---

<div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="SelectAddress" title="Address 1" aria-expanded="false"><span class="filter-option pull-left">Address 1</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open" role="combobox" style="padding-top: 0px; max-height: 297px; overflow: hidden; min-height: 37px;"><div class="popover-title"><button type="button" class="close" aria-hidden="true">×</button>Select an address</div><ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 248px; overflow-y: auto; min-height: 0px;"><li data-original-index="1" class="selected"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">Address 1</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2" class=""><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Address 2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div><select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address" onchange="blur_picker('SelectAddress')" tabindex="-98"><option class="bs-title-option" value="">Select an address</option>

---

Et en définitive, le blur doit être appliqué comme ceci:

Code:

---

$(".btn").blur();

---

Et là, ça marche, pourtant j'y croyais plus ! :lol: http://jsfiddle.net/93ohvn0j/

En en fait il est plus sécure de passer par l'id ...
bootstrap remplace ton select par un button avec un data-id = à l'id de ton select

Code:

---

<select id="SelectAddress"

---

génère un bouton avec

Code:

---

data-id['SelectAddress']

---

du coup tu peux faire le blur dessus

http://jsfiddle.net/2jq4mLoj/48/

ou beaucoup plus simplement vu que ce n'est pas le select initial qui a le focus, il suffit de lui redonner le focus

Code:

---

1 2 3

$("#SelectAddress").change(function() { $(this).focus(); });

---