javascript - How to bring focused field into the view using iscroll and Android WebView

When I focus into a form field at the bottom of iScroll view, it does not scroll up/bring the focused field above the softkeyboad. Any idea? Thank you!

This is the Android project. .zip

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: simple</title>

<style type="text/css" media="all">
body,ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}

#header {
    position:absolute; z-index:2;
    top:0; left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-color:#d51875;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}

#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
    position:absolute; z-index:2;
    bottom:0; left:0;
    width:100%;
    height:48px;
    background-color:#222;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iscroll.js"></script>

</head>
<body>

<div id="header"><a href="">iScroll</a></div>
<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
            <li>Pretty row 19</li>
            <li>Pretty row 20</li>
            <li>Pretty row 21</li>
            <li>Pretty row 22</li>
            <li>Pretty row 23</li>
            <li>Pretty row 24</li>
            <li>Pretty row 25</li>
            <li>Pretty row 26</li>
            <li>Pretty row 27</li>
            <li>Pretty row 28</li>
            <li>Pretty row 29</li>
            <li>Pretty row 30</li>
            <li>Pretty row 31</li>
            <li>Pretty row 32</li>
            <li>Pretty row 33</li>
            <li>Pretty row 34</li>
            <li>Pretty row 35</li>
            <li>Pretty row 36</li>
            <li>Pretty row 37</li>
            <li>Pretty row 38</li>
            <li>Pretty row 39</li>
            <li><form><input type="text" value="hey" spellcheck="false"></form></li>
        </ul>
    </div>
</div>
<div id="footer"></div>

<script>

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
window.addEventListener("resize", function() {
    console.error("=------======-=-=-==");
}, false);


</script>

</body>
</html>

When I focus into a form field at the bottom of iScroll view, it does not scroll up/bring the focused field above the softkeyboad. Any idea? Thank you!

This is the Android project. https://dl.dropboxusercontent./u/75818136/webkitdemo.zip

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: simple</title>

<style type="text/css" media="all">
body,ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}

#header {
    position:absolute; z-index:2;
    top:0; left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-color:#d51875;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}

#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
    position:absolute; z-index:2;
    bottom:0; left:0;
    width:100%;
    height:48px;
    background-color:#222;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iscroll.js"></script>

</head>
<body>

<div id="header"><a href="http://cubiq/iscroll">iScroll</a></div>
<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
            <li>Pretty row 19</li>
            <li>Pretty row 20</li>
            <li>Pretty row 21</li>
            <li>Pretty row 22</li>
            <li>Pretty row 23</li>
            <li>Pretty row 24</li>
            <li>Pretty row 25</li>
            <li>Pretty row 26</li>
            <li>Pretty row 27</li>
            <li>Pretty row 28</li>
            <li>Pretty row 29</li>
            <li>Pretty row 30</li>
            <li>Pretty row 31</li>
            <li>Pretty row 32</li>
            <li>Pretty row 33</li>
            <li>Pretty row 34</li>
            <li>Pretty row 35</li>
            <li>Pretty row 36</li>
            <li>Pretty row 37</li>
            <li>Pretty row 38</li>
            <li>Pretty row 39</li>
            <li><form><input type="text" value="hey" spellcheck="false"></form></li>
        </ul>
    </div>
</div>
<div id="footer"></div>

<script>

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
window.addEventListener("resize", function() {
    console.error("=------======-=-=-==");
}, false);


</script>

</body>
</html>

Share Improve this question edited Jun 7, 2013 at 6:57 Raghav Sood 82.6k26 gold badges193 silver badges199 bronze badges asked Jun 2, 2013 at 1:26 Nizzy 1,8893 gold badges21 silver badges33 bronze badges

How about this link. stackoverflow./questions/7026854/… – Sung-Pil Lim Commented Jun 7, 2013 at 6:53
won't work. I tried this :P – OschtärEi Commented Jun 7, 2013 at 6:56

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

I finally found the solution to my question. BTW, this solution will be in my book which will be published soon. I just wanted to share this with the developer munity.

First of all, iscroll should handle this matter for us, but somehow it does not.

Also, I think there is a bug in Android API. When I use full-screen mode (in manifest or programmatically), the "resize" event does not get fired in the WebView. No idea why. I already reported this bug to Android team. If you know why this happens, please let us know here. Thanks.

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

// or

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Here is the solution:

I removed the full-screen mode. Instead, I used res/values/style.xml, requestWindowFeature(android.view.Window.FEATURE_NO_TITLE); and android:theme="@style/Theme" in the application in order to remove the application native title. This solution also works when orientation occurs.

Then, using "focus" event, I captured which element has a focus.

var $elm;

$('input, textarea').bind('focus', function(e) {
    console.error("onFocus");
    $elm = $(this);
});

Then, using "resize" event, I refreshed the iscroll object and then scroll to the $elm.

$(window).bind('resize', function() {
    console.error("onResize");
    if (myScroll !== undefined) {
        setTimeout(function() {
            myScroll.refresh();
            myScroll.scrollToElement($elm[0], 200);
        }, 100);
    }
});

This is the answer to my question, WebKitDemo2.zip

I am not sure whether this is a good answer for your question. I have already faced same issue with soft keyboard & iscroll in a POS device. To sort out this issue I have done a STUPID work.

Steps I have done.

Assume you attached iScroll like this

iScrollObj = new iScroll('ID');

I append a empty div wrapper inside the scroll container at the last if I have input.
When input element get focus but before keyboard pops up I calculate the position of the input field (pi) and height of input (hi)
I get the height of screen (hs), height of keyboard (hk)
By using hs, hk, hi and pi I had calculated an height to empty div wrapper and assigned to it.
To avoid disappointment I had used iScrollObj.refresh() call back function.(because I had dynamically assign height to div wrapper, iScroll sometime response correctly for dynamic adjustments but sometime it fails)
Then I had used iScrollObj.scrollTo(x, y, time) iScroll callback function to move the input up
When I hide the keyboard I set the empty div wrapper height to 0
Now you have to reset. iScrollObj.refresh() and iScrollObj.scrollTo(x, y, time)

Still you can use iScrollObj.scrollToElement(element, time) but I think this is more work. Because element should be the CSS selector of an element in which iScroll with automatically scroll to that element in which it displays that element at the top position in the view. It means in the screen you have attached will say if you use the CSS selector of the Pretty row 34 then it will display from Pretty row 34 to down.

Please Note

Soft keyboard which I use is developed by me (It is a jQuery plugin) therefore I was able to implement all the required callback functions. iScroll already providing lot of callback functions.

Therefore I was able to plete my task and it is working correctly without any problem as we expect.

I do not know the constrains you have. Just shared the STUPID work what I have done.

Pardon me if this is not a proper solution to you.

Thanks.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to bring focused field into the view using iscroll and Android WebView - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)