Can't edit the input fields [edit: Video]


#1

Hi,
I can’t edit my inputs…text, textarea, whatever…

If the input has a value and I press backspace for a few seconds(the shift key turns on like if I had at the start of input), only then the field is cleared and I can edit.

I’ll make a video for you to have a better idea.

Thanks

Edit:
Follow the video: https://www.youtube.com/watch?v=gotRt_6uAfY


Running ionic in iPad inside an iframe
Iframe click event detect problem after scroll content
Ionic app inside iframe on iPad cannot edit input fields
Problem on iPhone 5 with input fields in a modal
Salesforce1 Ionic application (IOS keyboard not working)
#2

So from the looks of it, you have ios6?

What version of ionic do you have? Whats your markup look like? Can you provide a codepen or plnkr demo?


#3

Hi,
I’m using this:

<label class="item item-input">
    <span  class="input-label">Title</span >
<input type="text" ng-model="description "/>		        

and the nightly - 1.0.0-beta.9-nightly-276

Follow the codpen test http://codepen.io/fabioc/full/fywgK/

In Safari I have the same problem.

Thanks


#4

Is this issue on ios 6?


#5

No.
iOS 7.1.2

I’m test on iOS simulator(Safari) and same problem.


#6

Hmm, odd I never had this issue before. Are you getting any errors in the console? Can you provide a codepen example for that page so I can test it out on my end?


#7

No errors.

My page is exactly this that is in codepen(http://codepen.io/fabioc/full/fywgK/).
With this codepen example I can´t edit input too, I get the same error.

In the video I only put a button save on the right and some text in first input field to test because it was
not working

Thanks for your Help


#8

Really odd, I wasn’t having any issues. Curious though, if you tested on ios 7, why were you getting an ios 6 style keyboard?


#9

I’m running inside HP Anywhere…so propably it is your configuration.

Because this I create a codepen to text external HP Anywhere…and I had the same problem testing on my device and in iOS simulator.


#10

Hmm, well I tested it with just cordova

Since HP Anywhere uses iframes, it could be causing issues with inputs and events that ionic is listening for.


#11

But why in Safari I get this problem?
You test the codepen in safari and its Ok?


#12

Yeah tried it in mobile safari and it all works fine. All I did was copy the contents of your codepen to a blank starter project


#13

OMG…
look
https://www.youtube.com/watch?v=wgfiq6c0tSA

Codepen uses iframe too…

HPA uses cordova behind, so u can use all basics plugins and others thats
coming together.
I have to use window.parent.cordova…

Whats happening behind? Ionic duplicate my field?


#14

Yes, we do duplicate inputs, There were some situations where inputs would causing scroll issues.

Hmm, so the best thing I could suggest is to not use HPA, since ionic isn’t adapted for it


#15

hmm…i will try fix later

I have to use HPA because is a requirement…

Thanks for help


#16

Requirements…ah I know what you mean.

Yeah I wish I could be of more help.

Best of luck


#17

Only an update:

In the method “tapHandleFocus” in ionic.js I put before to set a focus to input element:

if(window.parent) {      
  window.parent.document.getElementById('iframe').contentWindow.focus();
}
ele.focus && ele.focus();

And now works fine.

Thanks


#18

I’m experiencing the exact same issue and specifically inside of the Salesforce1 App and only on iOS (7+). @fabioc, this fix doesn’t seem to work for me - where exactly in the method are you putting it? I have it here…

function tapHandleFocus(ele) {
  tapTouchFocusedInput = null;

  var triggerFocusIn = false;

  if(ele.tagName == 'SELECT') {
    // trick to force Android options to show up
    triggerMouseEvent('mousedown', ele, 0, 0);
    if(window.parent) {      
      window.parent.document.getElementById('vfFrameId').contentWindow.focus();
    }
    ele.focus && ele.focus();
    triggerFocusIn = true;

  } else if(tapActiveElement() === ele) {
    // already is the active element and has focus
    triggerFocusIn = true;

  } else if( (/^(input|textarea)$/i).test(ele.tagName) || ele.isContentEditable ) {
    triggerFocusIn = true;
    if(window.parent) {      
      window.parent.document.getElementById('vfFrameId').contentWindow.focus();
    }
    ele.focus && ele.focus();
    ele.value = ele.value;
    if( tapEnabledTouchEvents ) {
      tapTouchFocusedInput = ele;
    }

  } else {
    tapFocusOutActive();
  }

  if(triggerFocusIn) {
    tapActiveElement(ele);
    ionic.trigger('ionic.focusin', {
      target: ele
    }, true);
  }
}

#19

I was able to get the input fields working using just window.focus() at the top of the tapHandleFocus method… However text areas seem to still be broken. I’ve kicked off a discussion on StackOverflow

Is this something the Ionic team will address? Salesforce uses ionic in many of their example apps as things that can be built using visualforce, but having text inputs be broken out of the box on iOS is kind of a non-starter for many I would imagine.

Let me know if there’s anything I can provide to help solve this problem.


#20

I am experiencing the same problem, is there any update/fix for this?

Edit: OK i figured the problem appears when using placeholder… too bad, i very much liked placeholder, its better then label on screens with limited size.