CODEWITHSUNDEEP
htmlioscss
Captainlonate
Captainlonate

Reputation: 5008

Scrolling on ios device finger input tag

I have a basic form on a site with some input fields. If the user tries to scroll the page, and starts to scroll by placing his finger within an input box, it will not let the page scroll. If they start the scroll with their finger somewhere in the body, the page scrolls just fine.

It seems to be the same problem that this guy had, but he said a previous developer had purposefully implemented that and I definitely don't have that problem. Input field prevents page from scrolling on iphone

Any ideas?

Upvotes: 8

Views: 4621

Answers (4)

HarshvardhanSharma
HarshvardhanSharma

Reputation: 786

html { 
  overflow: scroll; 
  -webkit-overflow-scrolling: touch;
}

Works for input element and iframe element both. The touch event solution solves the scroll issue but disables the focus event on these elements.

Upvotes: 2

Amit
Amit

Reputation: 847

You can try below code to prevent input on touchmove

$(document).on('touchmove','input',function(e){
      e.preventDefault();
});

Upvotes: 0

corbin
corbin

Reputation: 1546

My code, after simplifying was something like this:

html:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, target-densitydpi=medium-dpi" />
        <title>Broken Input Scrolling</title>
        <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
        <script src="jquery.js"></script>
        <script src="jquery.mobile-1.4.5.min.js"></script>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>

    <div data-role="page" id="outerDiv">
        <div data-role="header">
            <h1>Broken Input Scrolling</h1>
        </div>

        <div data-role="content" id="contentDiv">
            <div id="tableDiv">
                <table>
                    <tbody>
                        <tr>
                            <td name="nameTitle" id="nameTitle" class="input-row3"><span>Scenario Name</span></td>
                            <td><input type="email" name="name1" id="name1" placeholder="Scenario 1"/></td>
                            <td><input type="email" name="name2" id="name2" placeholder="Scenario 2"/></td>
                            <td><input type="email" name="name3" id="name3" placeholder="Scenario 3"/></td>
                            <td><input type="email" name="name4" id="name4" placeholder="Scenario 4"/></td>
                            <td><input type="email" name="name5" id="name5" placeholder="Scenario 5"/></td>
                            <td><input type="email" name="name6" id="name6" placeholder="Scenario 6"/></td>
                            <td><input type="email" name="name7" id="name7" placeholder="Scenario 7"/></td>
                            <td><input type="email" name="name8" id="name8" placeholder="Scenario 8"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
       app.initialize();
    </script>

    </body>
</html>

css:

table {
    width: 90em;
    table-layout:fixed;
}
td {
    height: 3em;
    width: 10em;
    border: 0.1em solid black;
}
#tableDiv {
    overflow-x: auto !important;
}
#tableDiv > * {
    -webkit-transform: translate3d(0,0,0);
}

It turns out that removing this piece fixes the issue:

#tableDiv > * {
    -webkit-transform: translate3d(0,0,0);
}

This was unnecessary, but was added earlier on in the real project (much larger) when trying to improve scrolling.

I don't know why this causes an issue for iOS and not Android. If someone could fill in the details around why this occurs (and hence provide a better answer), they can get some of the bounty.

Btw... you will need to add more rows or wider rows if using a big enough screen that no scrolling is needed.

Upvotes: 1

Cristi Marian
Cristi Marian

Reputation: 453

A workaround for this issue might be :

function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function() {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

This will make Mobile Safari (others not tested so far) ignore the textareas for scrolling but allows to set focus etc. as usual.

Upvotes: 0

Related Questions