Making image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)

Question

I am trying to simulate the HTML5 input type='search' using javascript. My aim is to make something like this:

First of all, I will specify why I did not use HTML5 Search input type directly. In case of iPad, the mentioned input type shows the rounded corner textbox and all other features required for a native Search Input box look alike of iOS except for the small cross (x) icon on the corner of the textbox when user types in some text into the search box.

I tried everything - Putting input type search into a <form>, repositioning the type='search', etc. None seems to bring in the desired effect (only when the app is deployed on ipad - webview or mobile browser).

So, I've simulated the widget using a cross icon and selectively showing/hiding it based on the content inside the search box. It works fine in all versions of desktop Safari (switching through Developer tools). However, when I try on iPad, typing inside the search box shows the cross icon as desired, but doesnt allow the touch event to be registered on it. I also know the reason for this, since the on-screen keyboard is active when user is typing, the next touch event is prevented on the search text box. Due to this, the touch on cross icon is also prevented.

My code is as follows:

The HTML looks like this :

<form id="searchForm">
    <div>
        <input type="search" id="searchBox">
        <a id="cross_icon" >
            <img src="search.png">
        </a>
    </div>
</form>

The jquery code looks like this:

//This function will be triggered on keyup event on searchBox
showXIcon : function(){
                var search = $('#searchBox').val();
                if(search.replace(/\s/g, "") === "") {
                   $('#cross_icon').hide();
                } else {
                   $('#cross_icon').show();
                }


            },
//this function will be called on click on cross_icon
clearSearchBox: function(){
            $('#searchBox').val('');
            $('#cross_icon').hide();
        },

Is there a way to allow touch event on cross icon without explicitely blurring the on-screen keyboard ? Any other way or workaround?

Answer 1

you can replicate it with css here is an example of how I would do it

http://jsfiddle.net/LqVNM/6/

HTML:

<div id="search_combo">
    <div id="icon-left"><img id="s-img" src="http://c.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/search.png" width="16px" height="16px"/>&#x25BC; </div>
    <input type="text" name="search" id="search"/>
    <div id="icon-right"><img id="s-img" src="http://cdn3.iconfinder.com/data/icons/glyph/227/Cancel-128.png" width="16px" height="16px"/></div>
</div>

CSS:

#search{
    border: 0 none;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    height: 25px;
}

#search:focus {
    outline-width: 0;
}

#icon-left{
    font-size: 10px;
    color: #666666;

    display: inline;
    position: relative;
    right: -2px;
    padding: 8px 0px 6px 6px;
    border: 1px solid #666666;
    border-right: 0 none;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;

    cursor: pointer;
}

#icon-right{    
    display: inline;
    position: relative;
    left: -6px;
    padding: 4px 6px 5px 0;
    border: 1px solid #666666;
    border-left: 0 none;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

    cursor: pointer;
}
@-moz-document url-prefix() { 
  #icon-left{
     padding-top: 10px;
  }
   #icon-right{
     padding-top: 6px;
  }
}

#s-img{
    position: relative;
    top: 3px;
}

JQUERY:

$(document).ready(function(){
    $("#icon-left").click(function(){
        alert("clicked search icon");
    });

    $("#icon-right").click(function(){
        alert("clicked cancel icon");
    });
});

http://jsfiddle.net/LqVNM/6/