admin管理员组文章数量:1315306
Trying to preventDefault a keydown event in Firefox on a <select> but it does not work.
Any workaround?
For once something that even IE handles but Firefox does not!
See the code here:
/
<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();
});
});
Trying to preventDefault a keydown event in Firefox on a <select> but it does not work.
Any workaround?
For once something that even IE handles but Firefox does not!
See the code here:
http://jsfiddle/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();
});
});
-
2
Keydown in
<select>? Maybe you mean.focus()or.change()?? – Taufik Nurrohman Commented Feb 28, 2013 at 17:07 - 1 What exactly are you trying to prevent? – Mathew Thompson Commented Feb 28, 2013 at 17:08
- Prevent keydown events - such as when the user enters a key and the select chooses a value which starts with that key – Trant Commented Feb 28, 2013 at 18:14
5 Answers
Reset to default 4This is not much elegant but works:
$("select").keydown(function(e){
e.preventDefault();
var elem = this;
elem.disabled=true;
setTimeout(function() { elem.disabled = false; }, 0);
});
A greeting.
This seems to be working for me on Firefox 19. I am assuming your intention is to prevent the select value from changing via keyboard input when a user types in a 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
I assume you don't want another option to be selected when you press a key. I believe this is browser specific implementation and doesn't fire an event. What you might have to do is build out your own select imitation using regular elements and jquery. this could get very plicated depending on how crazy you want to get but here's 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. etc.
Another option is to use a plugin like Chosen. Take a look at what they've done. If you remove the input bar, you wil get select functionality and keypresses won't go change the selected option.
Concerning the selection change on keydown, try to add the entity ­ (soft hyphen) before the labels.
This is probably not the most elegant solution, but it does the trick.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis./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>
本文标签： javascriptCannot preventDefault via Firefox on a ltselectgtStack Overflow
版权声明：本文标题：javascript - Cannot preventDefault via Firefox on a <select> - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741978365a2408253.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论