Android: blue cursor appears when there's text in an input element

[alschwank]

Hi,

I have an issue with the input element. Everything is working normal if there’s no text in the input element. However, as soon as I have text in the input element and I focus on it (=click it), the blue Android cursor appears that is used to move the cursor. This blue cursor is not even at the position of the cursor in the text.
Do you have an idea how to resolve this issue?

This is the HTML I’m using:

<ion-view title="Settings">
  <ion-content>
    <label class="item item-input">
        <span class="input-label">Name2</span>
        <input id="settings_userNameInput2" type="text">
    </label>

    <label class="item item-input">
        <span class="input-label">Name3</span>
        <input id="settings_userNameInput3" type="text">
    </label>
    <!-- ... -->
  </ion-content>
</ion-view>

Here are four screenshots that show the issue:

1. Selected the first input element (without text). The correct cursor in the text and no blue cursor.
   

   

2. Writing in the first input element. The correct cursor in the text and no blue cursor.
   

   

3. Selected the first input element (with text). The blue cursor is visible at the top.
   

   

4. Selected the second input element (with text). The blue cursor is visible above the input element.
   <img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/ionicframework/original/3X/9/8/984a55f92b19273ad2c82d2c6a9b4d450ca48386.png" width=“281” height=“500”

My environment:

• Android 6.0.1
• Ionic 1.2.4-nightly-1917
• Ionic CLI 1.7.14

Thanks,
Alex

[amirhossein]

I have this problem too.
Do you fixed it?

[copet80]

I had the same problem, however in my case I don’t really want it appearing actually, so whenever my input component is focused, I ran this code:

if (document.selection) {
  document.selection.empty();
} else if (window.getSelection) {
  window.getSelection().removeAllRanges();
}

[elias-faraone]

I know It’s many years later, but for those who stumbled on the same issue and are using the Keyboard plugin from Cordova, try and add the following to your config.xml file:

<preference name="resizeOnFullScreen" value="true" />

See the official repo here for details.

Hope this helps,

Elias

[mayankkataria]

@copet80 thanks a lot. It fixed my issue.