Cannot preventDefault via Firefox on a <select>

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.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();        
    });         
});

Answers:

Answer

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

Answer

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

Answer

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

Answer

Concerning the selection change on keydown, try to add the entity &shy; (soft hyphen) before the labels.

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.