当我从我的 android 设备中选择 next 时，在填写表单时，它会跳过任何下拉列表 [英] When I select next from my android device, while filling a form, it skips any drop down

问题描述

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

当我在 android 手机上使用我的网站 - chrome 浏览器(或我的 android 设备上的任何浏览器)时，我使用手机键盘上的 next 导航到下一个字段.

表单上的字段序列:

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

我的 android 键盘上的下一步按钮可以很好地从名字导航到姓氏.但是，当我在输入完姓氏后选择下一步时，它会直接将我带到地址字段.它会跳过下拉字段.

制表符在台式机和 Apple 设备上都可以正常工作.只是安卓设备的问题.

我是否应该专门为 Android 浏览器处理此问题?

解决方案

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

如果键盘中存在 TAB 键，则按预期工作.Play-store 上的某些键盘有 TAB 键，例如 这个.您可以下载并查看按 TAB 键是否聚焦下一个选择元素或日期输入元素.

下面的演示展示了 TAB 键和下一步按钮的区别.您可以看到，在使用 TAB 键导航时，会触发键盘事件，其中显示 TAB keyCode 9.但是在使用 Next 键时，没有键盘事件触发，就好像浏览器甚至不知道刚刚发生了什么一样.

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

<div>最后一个按键按键代码:<span id="response_view" style="color: red;"></span>

<div><input type="text" name="first_name" id="first_name" size="35" placeholder="点击选择">

<div><input type="text" name="last_name" id="last_name" size="35" placeholder="然后使用TAB/Next键来聚焦这个输入">

<select name="date_day"><option value="-1">选择日期</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></选择><div><input type="text" name="address" id="address" size="35" placeholder="address">

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

(function(){let editableElementsSelector = 'input[type=text],input[type=email],input[type=number]';let nonEditableElementsSelector = 'select,input[type=date],input[type=time]';让 userClickDetected = false, userTouchDetected = false;//Kepps 跟踪用户点击 0.5 秒window.addEventListener('click', function() {userClickDetected = true;setTimeout(()=>{userClickDetected = false;}, 500);});//Kepps 跟踪用户触摸 0.5 秒window.addEventListener('touchstart', function() {userTouchDetected = true;setTimeout(()=>{userTouchDetected = false;}, 500);});document.querySelectorAll('form[next-button-fix]').forEach(function(form){让 formElements = form.elements;让 editableElements = form.querySelectorAll(editableElementsSelector);让 nonEditableElements = form.querySelectorAll(nonEditableElementsSelector);//链接元素for(let i=1; i

I have a web form consisting of input text boxes, drop downs and submit button.

When I use my website on android phone - chrome browser(or any browser on my android device, I am using next on my phone keyboard to navigate to the next field.

the sequence of fields on my form:

• first name (Text input)
• last name (Text input)
• day(drop down)
• month(drop down)
• year(drop down)
• address(text) zip(text)
• submit(button)

Next button on my android keyboard works fine to navigate from the first name to the last name. However, when I select next after I finish typing in the last name, it takes me directly to address field. It skips the drop-down fields.

tabbing works fine on desktop and on Apple devices. It is just an issue with the android device.

Should I be doing something specifically to handle that for android browsers?

解决方案

Don't confuse the Next button of your keyboard as TAB key, it's not. The next button of your keyboard just looks for next input field that is editable by your keyboard e.g text or number field. It will skip everything else because that will require closing the keyboard and bringing up the native calendar or combo box selector.

The TAB key if exists in your keyboard works just as expected. Some keyboards on play-store has a TAB key, like this one. You can download and see pressing the TAB key does focus the next select element or date-input element.

The following demo shows the difference of TAB key and Next button. You can see while navigating using the TAB key, keyboard events fire, which reveals the TAB keyCode 9. But while using the Next key, no keyboard event fires, as if the browser doesn't even know what just happened.

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>

The only way I see fit to resolve this issue is to use JavaScript to keep track of input elements in focus to determine if the Next key was pressed and it skipped a select element, then focus the select element by JavaScript.

(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();
        }
      });
    });
  });
})();

这篇关于当我从我的 android 设备中选择 next 时，在填写表单时，它会跳过任何下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！