Сделайте фон поля поиска кликабельным

Question

Сделайте фон поля поиска кликабельным

0

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. Тем не менее, я думаю, что это слишком хлопотно. Есть ли другие способы?

user2625152 20 сен. 2013, в 23:06

Источник

Теги:

javascript

html

css

search

1 ответ

Ещё вопросы

jcubic · Answer 1 · 2013-09-20T19-42-00.000Z

Я предполагаю, что searchClose.png выглядит примерно так

[                 ]
[              [x]]
[                 ]

то вам нужно получить позицию X сверху и слева от угла (используя некоторую графическую программу) в пикселях и использовать некоторую математику в onclick в javascript

если вы используете 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() { который будет работать, когда документ будет готов?