Search clear button does not appear in iOS

StackOverflow https://stackoverflow.com/questions/20735430

Pregunta

I have an application that does some searches against post codes and for the most part it works fine. However, I have noticed that the clear icon which appears on the right-hand side of the field does not appear in some browsers.

So I created a basic HTML markup to test against some browsers. This is not have any accompanying CSS stylesheet.

<input type="search" />

Under iOS 7 Safari and Chrome this does not appear. Under Safari 7.0.1 and Chrome 31.0.1650.63 on the Mac this works perfectly fine. Under Firefox 26 for Mac this does not appear.

The main reason why I want it is because the web app will be running mainly on the mobile platform and removing post codes in a flash would be very convenient for continued usage.

The other tactic I tried was to select the entire text once the field was on focus.

<input id="orig" type="search" value="" placeholder="Origin" onclick="this.select()">

This works under Firefox/Safari/Chrome on the Mac but not on iOS.

I do not really mind which of the above works as long as I can quickly get rid of the old text from the search field. Is there a universal markup I could use that would work across all browsers?

¿Fue útil?

Solución

I have solved my query with the following code using Jquery mobile:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Insert Page Title Here</h1>
  </div>

  <div data-role="content">
    <label for="search-enhanced">Search:</label>
           <div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">

           </div>
  </div>

  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div> 

</body>
</html>

I hope this helps anyone having the same issue.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top