在＆＃39; X＆＃39;内检测鼠标点击。右侧表格输入和模拟输入击键

Question

我有一个非常简单的背景图片形式：

<div id="search">
  <form role="search" method="get" class="" action="https://www.foo.com/">
    <label>
      <span class="screen-reader-text">Search for:</span>
      <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
    </label>
    <input type="submit" class="search-submit" value="Search">
  </form>           
</div>

看起来像这样：

表单是使用Wordpress插件生成的，无法轻易操作。提交表单的唯一方法是按“输入”＃39;输入文字后。

我希望用户能够点击搜索图标（背景图片）以提交表单。

首先，我需要检测表单右侧35px内的点击。我在这里找到了类似的问题：Determining if mouse click happened in left or right half of DIV

但是，该代码不允许特定的像素宽度。

点击后，表单应提交，我相信我可以使用以下代码：

$(this).closest('form')[0].submit();

Answer 1

您可以修改建议的代码：

$("input").click(function(e){
   var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders
   var pOffset = $(this).offset(); 
   var x = e.pageX - pOffset.left;
    if(pWidth - x < 35)
        $(this).closest('form')[0].submit();
});

小解释：

在pWidth中你点击了DOM元素的宽度

e.pageX是click的X坐标，但是你需要减去DOM元素的左偏移量。

然后只需简单地获取左侧的宽度（从点击位置到DOM元素的右端）并将其与期望值（在本例中为35px）进行比较，如果它低于此值，则提交表单