3

I've spent the last few days search for a solution, but everything that should work (according to the documentation) does not.

I'm using fastclick to eliminate the 300ms delay for HTML5 application intended to run on an iPad. Everything works great, except I lost the ability to type text into textarea. Simple one-line fields work, but not the multi-line textarea.

When I tap on the text area, the keyboard pops up and I can start typing. The first letter typed appears in the text area - but that's all. Subsequent letters do not. If I close the keyboard and tap on the text area again, I can type another one letter in.

I've tried everything suggested, including needsclick, needsfocus, etc. I tried to edit the fastclick.js to extend the special code for handling input elments to also cover textarea - nothing.

I'm at a point where I may have to dump fastclick just because of it and do everything manually myself, as I already lost almost a week on this problem. Yet, before I go that way, maybe somebody can point me in the right direction.

Note, the problem is present on iPad and iPhone with iOS 9.2 (specifically, 9.2.1 - the latest version).

Aleks G
  • 56,435
  • 29
  • 168
  • 265

2 Answers2

5

Ok, the reason turned out to be rather simple - and nothing to do with fastclick. It was this answer that actually solved it for me.

In my CSS, I had the following:

body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body input {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    user-select: text;
}

This was done to deal with silly users that would "touchstart" on a button then start thinking about what they want - and before "touchend", ios would then go into the copy/paste mode.

It was then explicitly disabled on inputs to allow copy/paste within the text. Yet, I forgot to include textarea in the second part. Now the second piece looks like this:

body input, body textarea {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    user-select: text;
}

And everything works as expected.

Community
  • 1
  • 1
Aleks G
  • 56,435
  • 29
  • 168
  • 265
1

jQuery fix,

$('input.form-control,textarea').on('click',function(){
    $(this).focus();
});

This worked in my case.

Vinith
  • 1,264
  • 14
  • 25
  • This worked for me because the parent element had a mousedown event that was preventing the cursor from going into the textarea. So instead of having to remove the mousedown, adding this allowed me to keep both functionalities. – Jeff Luyet May 21 '19 at 19:48