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

ionic-v1
21

Still severely broken for me as well. Just curious if anyone found better solutions?

22

I had same problem and solve that.

You need to remove css property ā€˜-webkit-user-select: none;ā€™

this property break to function of typing any iphone text fields.

1 Like
23

Iā€™ve tried removing the CSS property ā€˜-webkit-user-select: none;ā€™ and that doesnā€™t seem to solve the problem. Using this on ios 8 using mobile safari and chrome.

24

Still happens to me, iframe often doesnā€™t let me type in inputs on iOS 8.3 and 8.4 and with ionic 1.0.0. This is a third-party iframe so Iā€™m not sure what my options are.

25

Still happening to me with ionic 1.1.0 and iOS 9.0.2. I tried fabiocā€™s workaround but Iā€™m not sure where to put it, so perhaps I did it wrong. I also tried removing the *user-select: none CSS rules as suggested by pignose but that did not help.

Problem seems to happen on iPadā€™s chrome and in cordova browser, but works correctly in iPadā€™s safari.

Any solutions or ideas?

Thanks!

26

Update. I found that Chrome on my iPad was several versions behind. I updated chrome and now fabiocā€™s workaround is working for me. It also works in the phonegap browser.

In fact I was able to use austinwangā€™s simplified approach of a simple window.focus() at the top of tapHandleFocus.

Iā€™m up and running. Any other/better workaround ideas are still welcome, as I really donā€™t like having to manually hack the ionic.js file!
Thanks

27

Hi,

I am having the same issue with safari in mac osxā€¦ Not able to input anything from keyboard into input field. Could you please let me know where to add window.focus in ionic javascript. I tried adding it on top off tapHandleFocus(ele) call. But still have the same issue.

Thank you!

28

nelaturuk,

At first I simply hacked the ionic.js file like this:

	function tapHandleFocus(ele) {
		tapTouchFocusedInput = null;

		var triggerFocusIn = false;

		/////////////////////////////////////////////////////////
		//RMB HACK FOR IPAD NOT FOCUSING INSIDE IFRAME
		window.focus();
		/////////////////////////////////////////////////////////

	//... rest of tapHandleFocus method here
	}

That worked.
But I donā€™t like hacking 3rd party libs. So I moved it to my own app.js, in a .run method in my main angular app:

  .run(['$document', '$window', function ($document, $window) {
        var document = $document[0]; //unwrap the document from the jquery wrapper 
        // RMB HACK FOR IPAD NOT FOCUSING INPUTS INSIDE IFRAME
        document.addEventListener('click', function (event) {
            var hasFocus = document.hasFocus();
            if (!hasFocus)
                $window.focus();
        });
    }])

That seems to work just as well, and is much cleaner in my opinion since I can manage it in my own app.js file.

Iā€™ve been off the project for a few weeks. But it worked in all browsers/platforms I tried at the time.

1 Like
29

Beautiful fix @randbrown Works perfectly for me as well.