Databases
StackOverflow2013
Postsdbo
POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
    primarykey
    data
    text
    <p>I am trying to simulate the HTML5 <code>input type='search'</code> using javascript. My aim is to make something like this:</p> <p><img src="https://i.stack.imgur.com/dxoar.png" alt="enter image description here"></p> <p>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.</p> <p>I tried everything - Putting input type search into a <code>&lt;form&gt;</code>, repositioning the <code>type='search'</code>, etc. None seems to bring in the desired effect (only when the app is deployed on ipad - webview or mobile browser).</p> <p>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 <code>desktop Safari</code> (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.</p> <p>My code is as follows:</p> <p>The HTML looks like this :</p> <pre><code>&lt;form id="searchForm"&gt; &lt;div&gt; &lt;input type="search" id="searchBox"&gt; &lt;a id="cross_icon" &gt; &lt;img src="search.png"&gt; &lt;/a&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>The jquery code looks like this:</p> <pre><code>//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(); }, </code></pre> <p>Is there a way to allow touch event on cross icon without explicitely blurring the on-screen keyboard ? Any other way or workaround?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVidhi
    1. USVidhi
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COsame problem!!!
      singulars
      1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
      1. UStiger
    2. COHave you tried to stop event propagation? showXIcon : function(e){e.stopPropagation(); ...
      singulars
      1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
      1. USTecHunter
    3. COtried that. The problem is the icon is on textbox and as soon as we touch on icon, that is registered as touch on textbox and on-screen keyboard pops up. stop propogation did nothing :(
      singulars
      1. POMaking image positioned on textbox clickable in case of ipad (Creating HTML5 Search input type for iOS)
      1. USVidhi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload