Question

我正在使用autoFocus选项，以便在显示自动填充列表时，会自动选择第一个选项。

This是一个小提琴。自动填充代码为：

aData[json.extra]

但是，如果在Android上的Chrome浏览器上测试，那么对于任何非最后一个表单输入，都不会选择该项。

经过检查，我注意到Android设备上的“输入”（键盘右下角的按钮）按钮对于表单中的任何非最后一个输入元素是“Next”，而“enter”按钮用于最后一次输入形式的元素是“Go”。

我所描述的问题仅在“输入”按钮为“下一步”时发生（即：任何非最后一个输入元素）。

对于我如何解决此问题有任何建议吗？也就是说，如何在Android Chrome浏览器上使用“enter”键选择自动聚焦元素？

由于

Answer 1

您可以尝试通过事件回调获取/设置重点项目。

请参见以下示例：

$(document).ready(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  // Add variable to hold focued item value
  let focusedItem = '';
  
  $(".ac").autocomplete({
    source: availableTags,
    autoFocus: true,
    
    
    focus: function(event, ui) {
    // on focus set the focued item value to the variable
      focusedItem = ui.item.value;
      return true;
    },
    change: function(event, ui) {
      // user moved away from input, if variable is not null set it to input
      if (focusedItem != '') 
        jQuery(this).val(focusedItem);
      

      return true;
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<form>

  <input type="text" class="ac" />
  <input type="text" class="ac">
</form>

Answer 2

您可以在按键上捕捉输入按钮。

＆＃13;

$('input').on('keydown', function(e){
    if(e.which === 9) {
        //your code here
    }
});

＆＃13;

然后手动将焦点设置为自动完成功能。

在Android设备上的Jquery ui autocomplete autoFocus

2 个答案: