| Issue 17: | Can't edit text fields | |
| 32 people starred this issue and may be notified of changes. | Back to list |
What steps will reproduce the problem? 1. Implement iScroll 2. Implement a text field in your page What is the expected output? What do you see instead? It is impossible to input anything on a text field. What version of the product are you using? On what operating system? I am using iScroll 3.4.5 and a Nexus One with Android 2.2. Please provide any additional information below. This bugs seems to be only on Android 2.2, it doesnt not exist on iPhone and Android <= 2.1
Jul 22, 2010
I tested on simulator 2.2 the iScroll simple example. I put one textfield into a row and the bug is still there.
Jul 22, 2010
this surely helps me in debugging.
Aug 9, 2010
On my N1 Froyo I see this bug as well, but interestingly if I tap 3 times in a field I can get it to take focus. However, the virtual keyboard completely messes up the webview positioning by pushing it up and off screen.
Aug 31, 2010
This problem affects select elements in the iPhone as well; I'm guessing for the same reasons. I believe the only reason text inputs are not affected on an iPhone is because text inputs don't seem to respond to touchstart nor touchend events (see ticket 24).
Right now, I've changed to the beginning of the touchStart() method to not prevent the default action if the target is a select:
if (e.target.nodeName.toLowerCase() != "select") {
e.preventDefault();
e.stopPropagation();
}
I've done very little testing with this (none on Android yet), but perhaps something similar could be used for text inputs on Android.
Sep 1, 2010
Nice tip. This helped get the keyboard to pop up now (ie the input field to take focus), but still a problem with the layout getting pushed offscreen by the virtual keyboard.
if (e.target.nodeName.toLowerCase() != "input") {
e.preventDefault();
e.stopPropagation();
}
Oct 16, 2010
The trick to resolve the problem of layout being pushed offscreen is to catch the keyboard events.
Unfortunately the "Done" button on the VK is not traceable with javascript events,
so for my situation this snipped solved the problem.
$('input, textarea').bind('blur', function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
this because when the keyboard disappear all form fields are blurred.
greetings
Michele
btw: im making a new mobile framework based upon php / mysql / css3 / html5 / jquery and iScroll.
Nov 4, 2010
Note that if you do choose to special case inputs (and probably selects and textareas too) in touchStart that you should also special case the fake click dispatch in touchEnd. Otherwise, you'll get two click events which is probably not what you want.
Nov 16, 2010
Hi matt3o, do you plan to fix this issue in the near future?
if (e.target.nodeName.toLowerCase() != "select") {
e.preventDefault();
e.stopPropagation();
}
..shows now at least the keyboard. If I change the input it pushes the iScroller around. Can I somehow detect if a input-field is selected and disable the scrolling?
Dec 13, 2010
I would also dearly like to see this resolved. It's the killer for iScroll - and often not found until a lot of time is invested in implementing cool scrolling regions. In summary, SELECT fields are broken inside iScroll areas on iPhone and all form fields inside iScroll areas on Android (even in Froyo / 2.2). The workarounds in here partially solve the issue, but have significant unwanted side-effects.
Dec 13, 2010
I'm working on this for iscroll 4.
Dec 16, 2010
Hi. I'm not currently using iScroll but have run into the same problem with SELECT fields on pages where -webkit-transform: translate3d(x,y,z); has been applied to any containing element. On Android, they just plain don't work. Removing the transform clears up the problem. Unfortunately, you often need to translate3d(0,0,0) to stop animations from flashing. -doug
Jan 7, 2011
Any update on this? Is it fixed yet...or is the best option to use one of the work arounds listed above?
Apr 5, 2011
Any update on this issue? I'm using iscroll 4 but still have no response to text input fields on Android 2.2.
May 8, 2011
You can fix this by adding an if statement for browsers and platforms that do not work with the script. For example, replace:
that.options = {
with
if ((navigator.platform != "Win32") && (navigator.platform != "mac")) that.options = {
if you are using the script in a cross platform website., if you have webforms for mobile device place them outside of the "wrapper" and use css to enable them for only the mobile browsers. A bit of work but it's the only work around I've been able to come up with so far.
Jun 8, 2011
$(document).ready(function(){
var my_select = document.getElementsByTagName('select');
for (var i=0; i<my_select.length; i++) {
my_select[i].addEventListener('touchstart' /*'mousedown'*/, function(e) {
myScroll.destroy();
setTimeout(function(){myScroll = new iScroll('wrapper');},500);
}, false);
}
/*if you have input problems */
var input = document.getElementById('input');
if (input) {
input.addEventListener('touchstart' /*'mousedown'*/, function(e) {
e.stopPropagation();
}, false);
}
});
Jun 8, 2011
I think I came up with a fairly elegant solution. Requires changing the source code. I use iscroll-lite.js (version 4) so change line 195 to:
// e.preventDefault();
var target = e.target.nodeName.toLowerCase();
if ( "input" != target && "select" != target) {
e.preventDefault();
}
else {
return;
}
What this will do is if the thing you click on is select or input it wont apply any iscroll. I also do a return to speed things up (wont go thru the rest of the code). With out the return, it still works but takes FOREVER for the keyboard to come up.
I've tested on iPhone 3gs, android gingerbread (droid x) and iPad.
The browser on android does crash on me sometimes, which I cant figure out why.
Jun 25, 2011
It doesn't work on Chrome when I try. Although when checked the same files on iPhone, it works properly. With Google Chrome, the textfield just doesn't seem to be active!!
Aug 27, 2011
hello there,
in my application I fix it by add into
_start() method thats lines :
//line 296 :
c1, c2,
tagName = e.target.nodeName.toLowerCase();
if (that.focusedInput){
that.focusedInput.blur();
that.focusedInput = false;
}
if (tagName === "select" || tagName === "input" || tagName === "textarea") {
e.target.focus();
that.focusedInput = e.target;
}
tested only on all desktop browsers.
Oct 17, 2011
Sometimes it is undesirable to edit the library files yourself so untracked changes get lost. You can dump this code into a separate js file after iscroll.js is loaded and update functionality there. I chose the handleEvent function because it will let me update multiple triggers in the same space.
/**
* By default iScroll doesn't allow input fields to receive focus on most platforms, this takes care of that
*/
iScroll.prototype.handleEvent = function(e) {
var that = this,
hasTouch = 'ontouchstart' in window && !isTouchPad,
vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
(/firefox/i).test(navigator.userAgent) ? 'Moz' :
'opera' in window ? 'O' : '',
RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel';
switch(e.type) {
case START_EV:
if (that.checkInputs(e.target.tagName)) {
return;
}
if (!hasTouch && e.button !== 0) return;
that._start(e);
break;
case MOVE_EV:
that._move(e);
break;
case END_EV:
if (that.checkInputs(e.target.tagName)) {
return;
}
case CANCEL_EV:
that._end(e);
break;
case RESIZE_EV:
that._resize();
break;
case WHEEL_EV:
that._wheel(e);
break;
case 'mouseout':
that._mouseout(e);
break;
case 'webkitTransitionEnd':
that._transitionEnd(e);
break;
}
}
iScroll.prototype.checkInputs = function(tagName) {
if (tagName === 'INPUT' || tagName === 'TEXTFIELD' || tagName === 'SELECT') {
return true;
} else {
return false;
}
}
Nov 11, 2011
I've put a pull request together at https://github.com/cubiq/iscroll/pull/145 using piotrbrzuska's comment from Aug 27, 2011. Go to https://github.com/jxe/iscroll for a version of scroll with the fix.
Nov 12, 2011
Joe, this is great! Tested it working perfectly with select, input[text] and textarea (just needs an onblue event to do window.scrollTo(0,1)) However, still can't click on checkboxes or radios - any ideas? Thanks again Dave
Nov 12, 2011
Sorry I should add, radios/checkboxes work in chrome on the desktop, but not on the iphone :(
Nov 12, 2011
Sorry to triple post but wanted to share the solution with you... Change the lines in Joe's download above (https://github.com/cubiq/iscroll/pull/145) from 318 to the following: (sure it can be done nicer, but this works :) ) if (tagName === "select" || tagName === "input" || tagName === "textarea") { if (e.target.type=='checkbox') { if(e.target.checked==true {e.target.checked=false}else{e.target.checked=true} } else if (e.target.type=='radio') { if(e.target.checked==false){e.target.checked=true} } else { e.target.focus(); that.focusedInput = e.target; } } }
Nov 12, 2011
Very excited that this issue with text input may just about be resolved. I've retrieved 4.1.9 and am testing on Android 2.2 device and though the input text fields do now receive focus--I get a flashing cursor in the input field--the virtual keyboard does not appear. Any thoughts?
Dec 5, 2011
It only works in English language.. When I try to type in Korean language in Android. It won't work
Dec 6, 2011
I can't remember where this code bit came from but I am going to guess it was from one of the examples. I can't test it with my iPhone until the end of the week but I have used it before successfully with inputs, textareas, checkboxes and radio buttons. For the record I am using (I think) a slightly hacked version of 4.1.5 and just have not brought it up to 4.1.9 yet. Perhaps this weekend.
Tested in FF and Safari for windows while building with jQuery mobile.
My modifications to iScroll is just a slight variation of the checkDOMchanges that I call bumpInterval. It runs a short timer then removes itself entirely. Since I was having issues getting inconsistent results creating the scroller wrappers using the setTimeout method (the data-role-page were hidden) I moved creation to the pageshow and haven't had a problem since. When I do I just pass this to the new scroller,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){
e.preventDefault();
}
}
Dec 15, 2011
@30: I tested this solution with iOS (both iPhone and iPad) and android. With iOS it works perfectly, but it has some issues with SELECT on android. What I do is to create the iScroller only when needed (I check if the content is bigger than the window height). What happens is that the SELECT works properly until the iScroller has been created, but stops working after it. Anyone else has the same problem?
Dec 16, 2011
Correct @ davide ... same issue here. Does not work in android 2.2,but works in android 3.0 honeycomb.
Dec 19, 2011
This is for me the solution on input fields.
<script>
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: $zoom,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
Cheerz
Dec 23, 2011
@29 Dave. I need checkboxes as well. I am getting a syntax error copying and pasting your text. Can you include your code from the iscroll here? Thanks
Dec 25, 2011
Replacing line 312 to 315 in iscroll.js with this snipet helped me to get forms working:
var that = this,
point = hasTouch ? e.touches[0] : e,
matrix, x, y,
c1, c2,
tagName = e.target.nodeName.toLowerCase();
if (tagName === "select" || tagName === "input" || tagName === "textarea") {
e.target.focus();
that.focusedInput = e.target;
return;
}
if (that.focusedInput){
that.focusedInput.blur();
that.focusedInput = false;
}
Dec 27, 2011
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1){
target = target.parentNode;
}
if (!target.form){
e.preventDefault();
}
}
Dec 29, 2011
What is the best fix available for this issue? Thanks
Jan 5, 2012
I used the code suggested in comment #32, but for the sake of not touching the original code, I did this:
myScroll = new iScroll('wrapper', {
});
myScroll.options.onBeforeScrollStart = function(e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){
e.preventDefault();
}
}
Not the most attractive thing in the world but upgrading iscroll.js is less likely to break my site.
Jan 13, 2012
Please help guys I am getting layout problems ... I am working on an app in Android 2.2 ............ Previously text field in iScroll itself did not work .. But after implementing the changes as per this discussion i am able to click on the text field and enter the text ... But now i am getting layout problem now ... I am attaching some screenshots for you people to understand my problem ... 1.) Pic d1 - My screen (actual screen) 2.) Pic d2 - When i click on the text field and enter some text the virtual keyboard appears and it disturbs the layout .. it brings the footer up .. that is also okay for me.. 3.) Pic d3 - When i enter some text it brings in text field for us to see whatever we type .. fine .. the virtual keyboard does not have a done button .. so i used Back button in my android to make the virtual keyboard disappear .. 4.) Pic d4 - After the virtual keyboard disappears and i am not able to scroll the screen to the top .. please help me guys
Feb 14, 2012
I'm using iOS 5, and here are my problems after trying some of the latest comments: #37 didn't work very well. The footer moves up and down, and after I close the keyboard, the footer is in the middle of the page. Also, when I select an input, it jumps to another one. I used the code in #40 with preventDefault, and it works. The problem is that it makes the perfomance on iScroll bad. Without it, the scrolling is very smooth, just like without iScroll. With this it's lagging. It gets worse the more complex html I have on the page. For example a table with 500 rows, is horrible. Especially when I stop scrolling and the page slows down. I suspect that onBeforeScrollStart runs for each pixel scrolled, and maybe that slows it down? I want a great experience for my iPhone-users, not a feeling that their phone is 5 years old. Anyone have any ideas?
Feb 16, 2012
#40 worked for my use case in iOS 5 with a few input fields inside of a scrollable. Thanks jbergh!
Mar 21, 2012
Audio tag has the same problem as form fields. #40 fixes it for Android 4.x but breaks it for Android 2.3. On Android 2.3 with the fix as proposed in #40 events come through twice (!). This makes it impossible to pause or start audio (because play/pause is the same button).
Mar 29, 2012
hello all, I have given #40 a try seams to work well in 2.3 for me, I am using a Galaxy S2 for testing. The problem I have is when I attempt to open select boxes that are on the bottom of the screen my content jumps off the page completely. I'm not sure what the solution you could use then destroying and running the script again once the user focuses is off the field.
Apr 4, 2012
I am on iOS 5 too... Which one works best?
Apr 25, 2012
Easiest solution with Jquery
$('input.quantidade').live("click", function(e){
e.preventDefault();
$(this).focus();
})
May 25, 2012
By addigng the code of comment 25 the form elements work fine in iPhone, but on android the page gets reloaded on any touch event, like if I try to scroll the page or resize it..
Jun 15, 2012
Android Solution: Tweak the code in iscroll.js, ( as follows )
But the Footer comes up still :( .
// Events
onRefresh: null,
onBeforeScrollStart: function (e) {
//e.preventDefault();
var target = e.target.nodeName.toLowerCase();
if ( "input" != target && "select" != target) {
e.preventDefault();
}
else {
return;
}
},
Jul 31, 2012
"input", "select" and why not "textarea" ? :)
Aug 21, 2012
I'm using iscroll 4.2, iscrollview 1.2.3, jqm 1.1.1, jq 1.7.1...
The fix for selecting input/select/textarea seem to work great on all phones I've tested it on - except an "HTC Incredible" :/ I've tried setting focus, tried returning sooner in the _start("iScroll Scrolling") chain of event.. nothing seems to work.
The behavior I see is: Click on textfield - sometimes the cursor flashes inside the text box, sometimes it does not - no matter what I do or what appears in the box the virtual keyboard never shows up. In the event viewer I see: "...SoftKeyboardDetect(14868): Ignore this event..." several times.
If I comment out the data-iscroll from the wrapper div - the input works as expected.
Any help, any workaround, any suggestions much appreciated!
Thanks!
Nov 22, 2012
Try following solution
if (e.target.nodeName.toLowerCase() == "select" || e.target.tagName.toLowerCase() == 'input' || e.target.tagName.toLowerCase() == 'textarea')
{
return;
}
For training related to jQuery,Design pattern and other .net topics contact SukeshMarla@Gmail.com
Jan 8, 2013
Hello there, That was perfect answer given by @piotrbrzuska on comment #24, It was working fine with iOS, Android too.
Jan 15, 2013
The input area can be focuses but the wrapper div on iphone is not scrolling
Mar 31, 2013
None of these solutions work
Jun 30, 2013
i am using iScroll 4 and the following edit in the js file worked for me,
changed the "onBeforeScrollStart" on the js file to
onBeforeScrollStart: function (e) {var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():''); if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea') e.preventDefault(); }
Aug 3, 2013
This is what sort of worked for me, although still not perfect (for example, if the input or textarea is somewhere halfway down the screen or lower, it will not scroll into view when the keyboard pops up). But I was able to test on Android 2.3.5 (although it gives me an error the page still works perfectly) and on a 4.0.4 custom ROM (no errors). If anyone can give me some advice how to scroll the desired input area into view, please tell me. Using iScroll 4.2.5. Anyway, here's the code:
function init(){
var myScroll;
document.addEventListener('touchmove', function(e){e.preventDefault();}, false);
myScroll = new iScroll('wrapper');
setTimeout(function(){
myScroll.refresh();
}, 500);
$('textarea').bind('click tap', function(e){
e.preventDefault();
e.bubble=false;
return false;
}).bind('focus', function(e){
e.preventDefault();
e.bubble=false;
myScroll.destroy();
myScroll=null;
}).bind('blur', function(){
myScroll = new iScroll('wrapper');
setTimeout(function(){
myScroll.refresh();
}, 500);
});
document.addEventListener('DOMContentLoaded', init, false);
So basically whenever your desired input comes into focus, I destroy the myScroll element, and when you click outside the input, I call the init() function again to set myScroll again. Thanks to bengourley from https://github.com/cubiq/iscroll/pull/38 halfway down the page. Once again, if someone can help me bring the input field into view once clicked, that would be great.
Aug 12, 2013
Comment #49 worked for me. I had a non-working select due to iScroll 4.2.5. Running on Android 4.1.2 Webview with JQM 1.3.1. Still to test it on IPhone
Aug 20, 2013
Guys can u give me solution for the post #41..
Sep 2, 2013
As per #41 4.) Pic d4 - After the virtual keyboard disappears and i am not able to scroll the screen to the top .. please help me guys I am also facing the same problem in android 4.x any suggestions? thanks!
Sep 2, 2013
4) issue: reported in #41 we fixed it by register keyboard listener, on close window.scrollTo(0,0) |
Owner: matt3o