JQuery 移动过滤器输入捕获问题

Question

我在使用 Jquery 移动设备的 Filterable Widget 并将 keydown 侦听器绑定到搜索输入以仅捕获回车键时遇到问题。在初始搜索一个词时，例如 'Apple'，然后按回车键，它会按预期工作（结果清除并且焦点设置回输入）。

但仅在随后的单词搜索尝试中，如 'Banana'，未输入 'Banana' 的第一个字母，它仅显示 'anana' 因为我相信 keydown 侦听器正在干扰输入到输入框中的第一个键。请参阅以下演示此问题的示例：

JSFiddle Example

$('#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 移动过滤器输入捕获问题

JQuery Mobile Filter Enter Capture Issue

html

javascript

mobile

jquery

keydown

Working jsFiddle