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 图像相同的位置点击。不过,我觉得这样太麻烦了。 还有其他方法吗?
最佳答案
我假设 searchClose.png 看起来像这样
[ ]
[ [x]]
[ ]
然后您需要从 Angular 的顶部和左侧(使用一些图形程序)获取 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 事件并将光标更改为指针。
关于javascript - 使搜索字段的背景可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18925287/