代码之家 › 专栏 › 技术社区 › Tim

JQuery移动筛选器输入捕获问题

keydown mobile html jquery javascript

Tim · 技术社区 · 8 年前

我对Jquery mobile的Filterable Widget有一个问题,将keydown监听器绑定到搜索输入以仅捕获回车键。在最初搜索一个单词(如“Apple”)并按enter键时,它会如预期的那样工作(结果清晰,焦点重新回到输入)。

但只有在随后的搜索尝试中,比如“香蕉”,才不会输入“香蕉”的第一个字母,它只显示“anana”,因为我相信按键收听器正在干扰输入框中输入的第一个键。请参见下面的示例,演示此问题:

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>

1 回复 | 直到 8 年前

Community Egal 4 年前

好的,如果你通过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
        }
    },

如果你检查上面的内容,你会发现 $.小部件(“mobile.filterable”,{}); 内部检测到 Enter 按下键,当它听到它时,它就会设置 this._preventKeyPress = true; ,3猜这是怎么回事……是的,忽略了任何进一步的按键。

想必,这样做是为了阻止您在小部件处理最后一次搜索或类似搜索时更改搜索字符串。

但是,请注意 _onKeyPress 套 this._preventKeyPress = false; 因此,我们可以通过以下方式解决您的问题:

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