Question

尝试在<select>上阻止Firefox中的keydown事件，但它不起作用。

任何解决方法？

曾经有一些甚至是IE处理的东西，但Firefox却没有！

请参阅此处的代码：

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

Answer 1

这不太优雅但有效：

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

问候语。

Answer 2

这似乎对我在Firefox 19上起作用。我假设你的意图是当用户输入一个值时阻止选择值通过键盘输入改变。

$(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 3

我假设您在按某个键时不希望选择其他选项。我相信这是特定于浏览器的实现，并不会触发事件。您可能需要做的是使用常规元素和jquery构建您自己的选择模仿。这可能变得非常复杂，取决于你想要获得的疯狂程度，但这是一个小小的开始。

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

等。等

另一个选择是使用像Chosen这样的插件。看看他们做了什么。如果删除输入栏，您将获得选择功能，按键不会更改所选选项。

Answer 4

关于keydown的选择更改，请尝试在标签前添加实体（soft hyphen）。

这可能不是最优雅的解决方案，但它可以解决问题。

Answer 5

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

无法在<select> </select>上通过Firefox阻止默认

5 个答案: