使搜索字段的背景可点击答案

【问题标题】：Make the background of a search field clickable使搜索字段的背景可点击
【发布时间】：2013-09-20 20:25:12
【问题描述】：

HTML

<div class = "search ui-widget">
    <label for = "keyword"></label>
    <input type="text" id="keyword" onkeypress="searchKeyPress(event)">
    <input type="button" id="btnSearch" onclick="loadNearMeSearchFav('search', keyword.value,'','','no')"  />
</div>

CSS

.search input[type="text"]:focus {
    width: 12%;
    outline: 0;
    box-shadow: 0 0 8px rgba(81, 203, 238, 1);
    background: url(../../img/menu/searchClose.png) 3% 50% no-repeat #f3f3f3;
    padding-left: 30px;
}

以上是我输入文本的 html 和 css 代码。问题是当用户单击输入字段时，会出现 searchClose 图像。问题是我想让 searchClose 可点击，以便用户可以通过点击轻松删除输入。我已经阅读了许多网站，并且都建议制作一个透明的脚踝标签，该标签可在与我的 searchClose 图像相同的位置单击。但是，我认为这太麻烦了。还有其他方法吗？

【问题讨论】：

标签： javascript html css search

【解决方案1】：

我假设 searchClose.png 看起来像这样

[                 ]
[              [x]]
[                 ]

然后您需要从角的顶部和左侧（使用一些图形程序）以像素为单位获取 X 的位置，并在 javascript 中的 onclick 中使用一些数学运算

如果你使用 jQuery，那么这可能看起来像：

var search = $('.search input[type="text"]');
var offset = search.offest();
search.click(function(e) {
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    if (x > YOUR_LEFT_POSITION_OF_THE_BUTTON &&
        x < YOUR_WIDTH_OF_THE_BUTTON + YOUR_LEFT_POSITION_OF_THE_BUTTON &&
        y > YOUR_TOP_POSITION_OF_THE_BUTTON &&
        y < YOUR_HEIGHT_OF_THE_BUTTON + YOUR_TOP_POSITION_OF_THE_BUTTON) {
       // YOU CLICK INSIDE A BUTTON
    }
});

您还可以添加 mousemove 事件并将光标更改为指针。

【讨论】：

我不知道为什么，但它没有注册我的点击事件。我添加了一个 console.log 来检查它是否已进入我的函数，但它没有。
@user2625152 您是否包含了 jquery 并将该代码放入 $(function() { 中，该代码将在文档准备好时运行？