How to intercept "go" button on Android number soft keypad for web app with javascript or jquery

Question

Thank you in advance for your time!

In my web application, I have a number input that is part of a form submitted with AJAX and jQuery. The user enters a number (phone number in this case) and hits the "share" button, which is not an html submit button but a div that has an event listener.

When Android users click the number input, the number soft keypad is displayed. This keypad has a "go" button. When users click the "go" button, nothing happens. To submit the form, users must click the back button to hide the soft keypad and click the "share" button on the web page. This has caused confusion with several users.

Can I intercept the click on the "go" button from the soft keypad and use that to trigger my AJAX request?

Here is a redacted screenshot. The "share" button is behind the number soft keypad, which adds to user confusion:

Here's a snippet of the code:

HTML

<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

The Android 'Go' button is used in input elements to submit their parent form. As you have no form wrapping your input, nothing appears to happen.

Instead of listening specifically for the 'Go' button all you need to do is wrap the input in a form element and hook your AJAX code to the submit event of that form.

Note in the following example that I change the #sendShare element to a button so that it too submits the form element, but without needing to add any additional JS code.

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