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

Question

我在Jquery的可过滤Widget中遇到了问题，并将一个按键侦听器绑定到搜索输入，以便只捕获enter键。在最初搜索“Apple”这样的单词并按enter键时，它将按预期的方式工作(结果清晰，焦点被重新设置为输入)。

但只有在随后搜索一个单词的尝试中，比如“香蕉”，“香蕉”的第一个字母没有被输入，它只显示“anana”，因为我相信按键侦听器干扰了输入框中的第一个键。请参阅以下说明这一问题的例子：

JSFiddle实例

​

$('#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按键的内部检测，当它听到它时，它会设置this._preventKeyPress = true;，3猜它会做什么.是的，忽略任何进一步的按键。

这样做大概是为了阻止您在小部件处理最后一次搜索时更改搜索字符串或其他类似的内容。

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

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

工作jsFiddle