Question

我遇到了Jquery mobile的Filterable Widget的问题，并将keydown侦听器绑定到搜索输入以仅捕获enter键。在初始搜索单词（如“Apple”）并按下回车键时，它会按预期工作（结果清晰，焦点将重新设置回输入）。

但是只有随后的搜索尝试，如'香蕉'，'香蕉'的第一个字母没有进入，它只显示'anana'，因为我相信keydown听众干扰输入的第一个键进入输入框。请参阅以下示例来演示此问题：

$('#filter-input').keydown(function(e) {
  if (e.which == 13) { //Enter keycode
    // Do something here
		/* yada yada yada*/
    
    // Now clear input and set focus back to input
    $(this).val('').trigger("keyup").focus();
  }
});

<input data-type="search" id="filter-input" placeholder="Search">
<div data-role="controlgroup" data-filter="true" data-filter-reveal="true" data-input="#filter-input">
  <a href="#" class="ui-btn ui-shadow ui-corner-all">Apple</a>
  <a href="#" class="ui-btn ui-shadow ui-corner-all">Banana</a>
  <a href="#" class="ui-btn ui-shadow ui-corner-all">Car</a>
</div>

Answer 1

好的，所以如果你通过JQM跟踪事件，在$.widget( "mobile.filterable", {});内你会发现这个

// Prevent form submission
    _onKeyDown: function( event ) {
        if ( event.keyCode === $.ui.keyCode.ENTER ) {
            event.preventDefault();
            this._preventKeyPress = true; // the culprit
        }
    },

    _onKeyPress: function( event ) {
        if ( this._preventKeyPress ) { // the check that fails
            event.preventDefault();
            this._preventKeyPress = false;// the solution
        }
    },

如果您检查上述内容，您会看到$.widget( "mobile.filterable", {});内部检测到Enter keydown，当它听到它时，它会设置this._preventKeyPress = true;，3会猜到它的作用。 ...忽略任何进一步的按键。

据推测，这样做是为了阻止您在窗口小部件处理上一次搜索时更改搜索字符串或其他内容。

但是，请注意_onKeyPress设置this._preventKeyPress = false;因此我们可以解决您的问题：

$(this).val('').trigger("keypress").focus();

JQuery Mobile Filter输入Capture问题

1 个答案:

Working jsFiddle