Question

我有一个由输入文本框，下拉菜单和提交按钮组成的网络表单。

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

我表单上的字段序列：

名字（文字输入）
姓氏（文字输入）
天（下拉）
月（下拉）
年（下拉）
地址（文字）zip（文字）
提交（按钮）

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

标签在桌面和Apple设备上运行良好。这只是android设备的一个问题。

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

Answer 1

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

如果您的键盘中存在TAB键，则按预期方式工作。 Play商店中的某些键盘具有TAB键，例如this one。您可以下载并看到按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

试试这个

将您的微调器设置为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);
}

Answer 3

考虑使用tabIndex

tabindex全局属性指示其元素是否可以聚焦，以及是否/在何处参与顺序键盘导航（通常使用Tab键，因此使用名称）。

这是一个以我选择的怪异顺序集中输入和div的示例：

div:focus { font-weight: bold; }

<br>
<label>CLICK THIS INPUT THEN TAB <input  tabindex="0"></label>
<br>

<div tabindex="1">FOCUS 2 (ye u can focus text too)</div><br>

<label>FOCUS 4<input  tabindex="3"></label><br>

<label>FOCUS 3<input  tabindex="2"></label><br>

<label>no FOCUS<input  tabindex="-1"></label><br>

<label>FOCUS 5<input  tabindex="4"></label><br>

Answer 4

只需将next属性添加到您的select元素。这将使键盘将选择内容识别为可行的焦点。

在next上进行选择时，它将获得焦点，并且键盘将从屏幕上移开。 select元素将不展开，要求用户触摸它以进行扩展并进行选择。此外，在进行选择后，由于键盘未处于活动状态以提供其contenteditable按钮，因此要求用户触摸表单中的下一个字段。

我的观点是，这是表格展示的最合理的行为。就是说，应该从浏览器和/或键盘软件供应商的更高层次上解决此问题。

这已在使用GBoard和TouchPal键盘的Android 6.0.1上进行了测试。仅包含以下CSS，以使表单看起来更好看。唯一需要做的就是select元素上的<form>属性。字段还必须包含在next标记内（.form-field { padding: 10px; } .form-field label { display: block; } .form-field input, .form-field select { display: block; width: 100%; margin: 0; padding: 0; }的显示在没有form标记的情况下无法正常工作）。

<form>
	<div class='form-field'>
		<label>Name</label>
		<input/>
	</div>
	<div class='form-field'>
		<label>Age</label>
		<input/>
	</div>
	<div class='form-field'>
		<label>Mood</label>
		<select contenteditable>
			<option value=''>Please Select</option>
			<option>Happy</option>
			<option>Sad</option>
			<option>Glad</option>
			<option>Mad</option>
			<option>Rad</option>
		</select>
	</div>
</form>

<Reference Include="System.Data.SqlClient, Version=4.5.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
  <HintPath>..\packages\System.Data.SqlClient.4.6.0\lib\net461\System.Data.SqlClient.dll</HintPath>
</Reference>

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

4 个答案: