如何使用 javascript 或 jquery 拦截 Web 应用程序的 Android 数字软键盘上的“开始”按钮

Posted 2023-05-07

【中文标题】如何使用 javascript 或 jquery 拦截 Web 应用程序的 Android 数字软键盘上的“开始”按钮

【英文标题】：How to intercept "go" button on Android number soft keypad for web app with javascript or jquery

【发布时间】：2021-09-14 16:00:20

【问题描述】：

提前感谢您的宝贵时间！

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

android 用户点击数字输入时，会显示数字软键盘。该键盘有一个“开始”按钮。当用户单击“开始”按钮时，什么也没有发生。要提交表单，用户必须单击返回按钮以隐藏软键盘并单击网页上的“共享”按钮。这引起了一些用户的困惑。

我可以拦截软键盘上的“开始”按钮的点击并使用它来触发我的 AJAX 请求吗？

这是经过编辑的屏幕截图。 “分享”按钮在数字软键盘后面，增加了用户的困惑：

这是代码的sn-p：

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

【参考方案1】：

Android 的“开始”按钮用于输入元素以提交其父元素form。由于您没有包装输入的表单，因此似乎什么也没有发生。

您只需将输入包装在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
    
  );
);

【讨论】：

感谢您的快速响应。我曾考虑过使用表单元素，但在过去将侦听器附加到提交事件时我有过不好的经历。我故意试图避免它，但在这种情况下，它可能是要走的路。如果我使用这种方法，我会将您的答案标记为正确。再次，我非常感谢您的帮助。

附加到submit 事件处理程序是最佳实践，应始终与form 标记一起使用。没问题，希望答案有帮助:)

接受的答案。谢谢