CODEWITHSUNDEEP
javascripthtmlcsssearch
user2625152
user2625152

Reputation: 517

Make the background of a search field clickable

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

The above are my html and css codes for the input text. The thing is when the user clicks on the input field, the searchClose image will appear. The thing is I want to make the searchClose clickable such that the user can remove the input easily with a click. I've read many sites and all suggested to make a transparent ankle tag that is clickable at the same position as my searchClose image. However, I think this is too troublesome. Is there any other ways?

Upvotes: 0

Views: 144

Answers (1)

jcubic
jcubic

Reputation: 66550

I assume that searchClose.png is looking something like this

[                 ]
[              [x]]
[                 ]

then you need get the position of the X from top and left of the corner (using some graphic program) in pixels and use some math in onclick in javascript

if you use jQuery then this can look something like:

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

You can also add mousemove event and change the cursor to pointer.

Upvotes: 1

Related Questions