当我从我的Android设备中选择下一个时,在填写表单时,它会跳过任何下拉菜单

Question

我有一个由输入文本框,下拉菜单和提交按钮组成的Web表单.

当我在Android手机上使用我的网站 - Chrome浏览器(或我的Android设备上的任何浏览器,我在手机键盘上使用下一个导航到下一个字段.

我表单上的字段序列:

• 名字(文字输入)
• 姓氏(文字输入)
• 一天(下拉)
• 月份(下拉)
• 年(下拉)
• 地址(文本)zip(文本)
• 提交(按钮)

我的Android键盘上的下一个按钮可以正常导航从名字到姓氏.但是,当我在完成输入姓氏后选择下一个时,它会直接转到地址字段.它会跳过下拉字段.

tabbing在桌面和Apple设备上运行良好.这只是Android设备的一个问题.

我应该专门为Android浏览器做些什么吗？

Answer 1

不要将键盘的“下一步”按钮与TAB键混淆，不是。键盘的下一个按钮仅查找可通过键盘编辑的下一个输入字段，例如文本或数字字段。它将跳过其他所有内容，因为这将需要关闭键盘并调出本地日历或组合框选择器。

如果键盘上存在TAB键，则按预期方式工作。Play商店中的某些键盘具有TAB键，例如此键。您可以下载并看到按TAB键的确聚焦了下一个选择元素或日期输入元素。

以下演示显示了TAB键和“下一步”按钮的区别。您可以在使用TAB键进行导航的同时看到键盘事件，它会显示TAB keyCode9。但是，在使用Next键时，不会触发任何键盘事件，就好像浏览器甚至不知道发生了什么一样。

document.getElementById('my_form').addEventListener('keydown', function(event) {
  document.getElementById('response_view').innerHTML = event.keyCode;
})

<form action="" id="my_form">
  <div>
    Last Key Press Key Code:
    <span id="response_view" style="color: red;"></span>
  </div>
  <div>
    <input type="text" name="first_name" id="first_name" size="35" placeholder="Select it by click">
  </div>
  <div>
    <input type="text" name="last_name" id="last_name" size="35" placeholder="Then use TAB/Next key to focus this input">
  </div>
  <select name="date_day">
    <option value="-1">Select Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <div>
    <input type="text" name="address" id="address" size="35" placeholder="address">
  </div>
</form>

我认为适合解决此问题的唯一方法是使用JavaScript跟踪输入元素的焦点，以确定是否按下了Next键并跳过了select元素，然后通过JavaScript聚焦了select元素。

(function(){
  let editableElementsSelector = 'input[type=text],input[type=email],input[type=number]';
  let nonEditableElementsSelector = 'select,input[type=date],input[type=time]';
  let userClickDetected = false, userTouchDetected = false;
  // Kepps track of user click for 0.5 seconds
  window.addEventListener('click', function() {
    userClickDetected = true;
    setTimeout(()=>{userClickDetected = false;}, 500);
  });
  // Kepps track of user touch for 0.5 seconds
  window.addEventListener('touchstart', function() {
    userTouchDetected = true;
    setTimeout(()=>{userTouchDetected = false;}, 500);
  });
  document.querySelectorAll('form[next-button-fix]').forEach(function(form){
    let formElements = form.elements;
    let editableElements = form.querySelectorAll(editableElementsSelector);
    let nonEditableElements = form.querySelectorAll(nonEditableElementsSelector);
    // linking elements
    for(let i=1; i<formElements.length; i++){
      formElements[i].previousFormElement = formElements[i-1];
      formElements[i-1].nextFormElement = formElements[i];
    }
    // Focuses next element on Next button click
    editableElements.forEach(function(element){
      element.addEventListener('blur', function(event){
        if(!userClickDetected && !userTouchDetected){
          if(element.nextFormElement && event.relatedTarget != element.nextFormElement){
            element.nextFormElement.focus();
          }
        }
      });
    });
    // Focuses next element on select element change
    nonEditableElements.forEach(function(element){
      element.addEventListener('change', function(event){
        if(element.nextFormElement){
          element.nextFormElement.focus();
        }
      });
    });
  });
})();

Answer 2

尝试这样

将具有 focusable 属性的微调器设置为 true，

yourEditText.setOnEditorActionListener(new OnEditorActionListener() {
    @Override
    public boolean onEditorAction(TextView textView, int actionId, KeyEvent event) {
        if (actionId == EditorInfo.IME_ACTION_NEXT) { //trigger when user taps on next button in keyboard
            hideKeyboard(); //hides the keyboard as it is not necessary here
            yourEditText.clearFocus();
            yourSpinner.requestFocus();
            yourSpinner.performClick();//opens the dropdown in your spinner
        }
        return true;
    }
});

//当旋转器聚焦时隐藏键盘

private void hideKeyboard() {
    InputMethodManager inputManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
    inputManager.hideSoftInputFromWindow(this.getCurrentFocus().getWindowToken(),
            InputMethodManager.HIDE_NOT_ALWAYS);
}