Why can't I click input?

Question

I'm using iScroll4 plugin (http://cubiq.org/iscroll-4/) to add scrollbar to pages that are longer than 80% of height of the browser's viewport. For some reason when (and only in this case) I add it and try to click on input, it won't select. Only clicking on its label will select input.

What can I do to have iScroll4 and selectable input?

Oddly enough right-clicking the `input` elements will move the focus to that element (even if you dismiss the context menu), but not clicking. — David Thomas, Feb 09 '12 at 11:41
Yes, it works on right-click and label-click but not left-click also for me :) — Atadj, Feb 09 '12 at 11:44
It might have something to do with your markup. You shouldn't nest an input inside a label tag. Is the markup dynamic? Maybe you should look into cutting down on the number of nested tags. — Alex Morales, Feb 09 '12 at 13:46

score 12 · Accepted Answer · answered Feb 23 '12 at 11:04

12

Try this solution

   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();
        }
   }

answered Feb 23 '12 at 11:04

darryn.ten

6,784
3
47
65

WOOOOOOOOOO! +1 Thanks @darryn.ten I hate to ask this of you, could you briefly explain why this worked :-/ If you get some time. Thanks again! – Red2678 Oct 08 '13 at 16:22

score 5 · Answer 2 · answered Jun 04 '13 at 14:00

5

$('input[type=text]').bind('touchstart click', function(){
    $(this).focus();
});

answered Jun 04 '13 at 14:00

Brynner Ferreira

1,527
1
21
21

1

Like most simple solutions, this one works best for me. – Matt Feb 15 '19 at 22:24

score 0 · Answer 3 · answered Jul 03 '14 at 19:07

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });

   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();
        }
    }
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

vanduc1102 · Answer 4 · 2015-05-22T10:39:57.587

I use version 5.1.2 and it worked.

 window.myScroll = new IScroll ('#iscroll-wrapper',
    probeType:  3,
    mouseWheel: true,
    scrollbars: true,
    bounce: true,
    keyBindings: true,
    invertWheelDirection: false,
    momentum: true,
    fadeScrollbars: false,
    interactiveScrollbars: true,
    resizeScrollbars: true,
    shrinkScrollbars: false,
    click: false,
    preventDefaultException: { tagName:/.*/ }
}

Why can't I click input?

4 Answers4