CODEWITHSUNDEEP
javascriptjquerycssios8
Balabeque
Balabeque

Reputation: 317

How to hide blinking caret (pipe) inside input field in iOS8-based devices?

I'm using a jQuery date picker plugin for one of my projects (Zebra Datepicker), which requires using input fields. The problem is that while testing the site on iPhone 6 (running iOS8), when I tap on the corresponding input field, the calendar appears with the default dark blue blinking cursor (pipe) above the calendar (and it's not a z-index issue). Here's the screenshot:

enter image description here

The given bug won't reproduce on the devices running iOS versions lower than 8.

Any known workaround on how to hide this annoying cursor at all? I consider both CSS and JS-based solutions.

Thanks!

Upvotes: 0

Views: 1570

Answers (3)

Raja Jaganathan
Raja Jaganathan

Reputation: 36167

Try adding readonly attribute to input element, so that you won't see text cursor blinking if you do not want to changes the date through keyboard typing.

<input type="text" readonly="readonly" class="selector">

Upvotes: 0

Fırat Abak
Fırat Abak

Reputation: 11

I had same problem and I solved it.if you prevent to zoom on ios this worked for me you can test it

fotenoot: it's working on ios devices too. (I checked)

.selector {
  text-shadow: 0 0 0 gray;
  color: transparent !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none; // latest Opera versions support -webkit-
  user-select: none;
  &:focus {
    outline: none;
  }
}
<input type="text" class="selector">

Upvotes: 1

Web pundit
Web pundit

Reputation: 498

I don't have an ios device to test at the moment, but this thread Disable blinking cursor in UITextField? might solve your problem

Upvotes: 0

Related Questions