如何在带有javascript或jquery的web应用程序的Android编号软键盘上拦截"go“按钮

Question

提前谢谢您的时间！

在我的web应用程序中，我有一个数字输入，它是AJAX和jQuery提交的表单的一部分。用户输入一个号码(在本例中为电话号码)并点击“共享”按钮，该按钮不是html提交按钮，而是具有事件侦听器的div。

当Android用户单击数字输入时，将显示数字软键盘。这个键盘上有一个“开始”按钮。当用户单击"go“按钮时，什么都不会发生。若要提交表单，用户必须单击“后退”按钮以隐藏软键盘，然后单击网页上的“共享”按钮。这引起了几个用户的混淆。

我能从软键盘上截取"go“按钮并使用它触发AJAX请求吗？

这是一张编辑过的截图。“共享”按钮位于数字软键盘后面，这增加了用户的困惑：

​

​

下面是代码的一个片段：

<label>Recipient Phone Number<br>
<small>Numbers only.  Enter country code for international.</small>
<input type="number" step='1' id="shareNumber"></label>
<div id="sendShare">Share</div>

Javascript

$('#container').on('click','#sendShare',function(event){
    event.preventDefault;
    var phoneNumber = $('#shareNumber').val();
    $.ajax({
        url:url,
            type: 'POST',
            data: {
            phoneNumber: phoneNumber
            },
        success: function(data) {
            // do stuff
        }
    });
    return false;
});

Answer 1

在输入元素中使用Android 'Go‘按钮来提交他们的父form。由于您没有表单包装您的输入，似乎什么都没有发生。

您所需要做的不是专门侦听“Go”按钮，而是将输入包装在form元素中，并将您的AJAX代码与该表单的submit事件挂钩。

注意，在下面的示例中，我将#sendShare元素更改为button，以便它也提交form元素，但不需要添加任何额外的JS代码。

<form id="yourForm">
  <label>Recipient Phone Number<br>
    <small>Numbers only.  Enter country code for international.</small>
    <input type="number" step='1' id="shareNumber" />
  </label>
  <button type="submit" id="sendShare">Share</button>
</form>

$('#container').on('submit', '#yourForm', e => {
  e.preventDefault;
  var phoneNumber = $('#shareNumber').val();
  
  $.ajax({
    url: url,
    type: 'POST',
    data: { phoneNumber: phoneNumber },
    success: function(data) {
      // do stuff
    }
  });
});