Geek Answers Handbook

Unable to prevent detection through Firefox via <select>

Trying to prevent the Default keydown event in Firefox on <select> , but it does not work.

Any workaround?

For some reason that even IE handles, but Firefox does not!

See the code here:

http://jsfiddle.net/p8FNv/1/

 <select id="select"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="7">Sunday</option> </select> $(document).ready(function() { $("#select").keydown(function (event) { event.preventDefault(); event.stopPropagation(); }); });
+7
source share
5 answers

This is not very elegant, but it works:

 $("select").keydown(function(e){ e.preventDefault(); var elem = this; elem.disabled=true; setTimeout(function() { elem.disabled = false; }, 0); });

Greeting.

+3
source

This seems to work for me in Firefox 19. I assume that you intend to prevent the selection value from being changed by keyboard input when the user enters the value.

 $(document).ready(function() { var valueToKeep; $("#select").keypress(function (event) { $(this).val(valueToKeep); }); $("#select").keydown(function (event) { event.preventDefault(); event.stopPropagation(); valueToKeep = $(this).val(); }); });

Jsfiddle

+1
source

I assume that you do not want to select another option when you press a key. I believe this is a browser-specific implementation and does not fire an event. What you might need is to create your own simulation using regular elements and jquery. it can get very complicated depending on how crazy you want to get, but here is a small start.

HTML:

 <div class="imitateSelect> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

CSS

 .imitateSelect div{ display:none; }

JS:

 $('.imitateSelect div').first().show(); $('.imitateSelect div').on('click', function(){ $(this).siblings().slideDown(); });

etc .. and others.

Another option is to use a plugin like Chosen . See what they did. If you remove the input panel, you will get a selection function, and pressing the keys will not change the selected option.

0
source

As for changing the selection when you press a key, try adding the &shy; object before the tags ( soft hyphen ).

This is probably not the most elegant solution, but it does the trick.

0
source 
 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <select id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <script> // working fine in PC and mobile $('#select').on('focus', function() { $(this).hide(); setTimeout(function(self) { self.show(); }, 0, $(this)) }); </script> </body> </html>
0
source

More articles:


All Articles