Twitter自举键入自定义按键ENTER功能 [英] Twitter bootstrap typeahead custom keypress ENTER function
问题描述
$(document).keyup(function(event ){
if(event.keyCode == 13){
if($('。dropdown-menu')。css('display')!='none'){
var newskill = $(。dropdown-menu> li.active)。val();
alert('Yay');
}
else {
var newskill = $(#enterbox)。val();
alert('Boo');
}
return false;
}
});
如果下拉菜单可见,则输入keypress功能将使用当前活动的下拉菜单和粘贴元素它进入文本框(内置到Bootstrap)。没有提示框显示。任何想法,我可以如何让我的功能触发之前发生,即在Bootstrap的功能开始之前?
而不是听按键(如果用户使用鼠标进行选择?),我们可以利用自定义事件 您可以使用jQuery的 .on()方法,您将获得有关第二个参数中用户选择的信息。 从那里你可以按照你喜欢的 I'm working with Twitter bootstrap on a Django site I'm making. I have a page where users can enter all of their technical skills in a text input equipped with a bootstrap typeahead. I'm trying to access the text within the currently selected within the dropdown menu, such that when ENTER is pressed and an element is highlighted in the dropdown, it takes that value and displays it below the input text field. Then the input text field is cleared and the user can search for another skill. If the dropdown is visible, then the enter keypress function takes the currently active element of the dropdown and pastes it into the text box (built in to Bootstrap). No alert box shows. Any idea how I can get my function to trigger before that happens, ie before Bootstrap's function kicks in? Instead of listening for a keypress (what if the user makes a selection with their mouse?), we can take advantage of the custom events Twitter's Typeahead emits. Namely, You can listen for it using jQuery's .on() method, and you will be provided with information about the user's selection in the second argument.
From there you can do as you like with the
这篇关于Twitter自举键入自定义按键ENTER功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
typeahead:selected
- 当下拉菜单中的建议是明确选择
捕获选择
$('input.typeahead')。on('typeahead:selected',function(event,selection){
alert(selection.value);
});
清除输入字段
selection.value
来做。唯一的gotcha将尝试使用 .val()
清除输入。由于Typeahead做了很多漂亮的DOM重写,所以你也需要使用'setQuery'方法。
$ ('input.typeahead')。typeahead('setQuery','');
$(document).keyup(function(event) {
if (event.keyCode == 13) {
if ($('.dropdown-menu').css('display') != 'none'){
var newskill = $(".dropdown-menu > li.active").val();
alert('Yay');
}
else{
var newskill = $("#enterbox").val();
alert('Boo');
}
return false;
}
});
typeahead:selected
– Triggered when a suggestion from the dropdown menu is explicitly selected.Capturing the selection
$('input.typeahead').on('typeahead:selected', function(event, selection) {
alert(selection.value);
});
Clearing the input field
selection.value
. The only "gotcha" would be trying to clear the input using .val()
. Since Typeahead does quite a bit of fancy DOM rewriting, you'll need to use their 'setQuery' method as well.$('input.typeahead').typeahead('setQuery', '');