Android/ios webview中点击某个按钮显示input并让其聚焦但调不起系统键盘

renchao4310 2013-12-12 08:58:53

请教一下各位大神关于此问题的解决方案：
在android/ios的webview中实现一个这样的功能：点击某个按钮，调出悬浮的input，并让input获取焦点，此时期望的是在获取焦点的同时调出系统键盘，但我的实现方法会在input获取焦点后失去焦点，导致系统键盘无法正常调用。代码如下，希望各位大神指点！

PS：不要使用onclick的方法，这种监听方法在移动设备上有执行延时，尽量用移动事件"touchstart","touchmove","touchend"。

<!DOCTYPE HTML>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

    </head>

<body>



    <form>

        <input type="text" id="text1" style="visibility: hidden;" />

        <br />

        <input id="foucs" type="button" value="foucs" />

        <input id="blur" type="button" value="blur" />

    </form>



</body>

<script type="text/javascript">

    function setFocus(){

        var input = document.querySelector("#text1");

        input.style.visibility = "visible";

      document.getElementById('text1').focus();

    };



    function loseFocus(){

        var input = document.querySelector("#text1");

        input.style.visibility = "hidden";

      document.getElementById('text1').blur();

    };



    function tap(element, callback) {



        var didMove, tapCancelTime, startTime, endTime, _bind;



        tapCancelTime = 2 * 1000;



        _bind = function(fn, me) {

            return function() {

                return fn.apply(me, arguments);

            };

        };



        if ('ontouchstart' in document.documentElement) {

            element.addEventListener('touchstart', _bind(function(e) {

                startTime = new Date().getTime();

                didMove = false;

            }, element));



            element.addEventListener('touchmove', _bind(function(e) {

                didMove = true;

            }, element));



            element.addEventListener('touchend', _bind(function(e) {

                endTime = new Date().getTime();

                if (!didMove && ((endTime - startTime) < tapCancelTime)) {

                    callback(e);

                }

            }, element));



            element.addEventListener('touchcancel', _bind(function(e) {

                callback(e);

            }, element));

        } else {

            element.addEventListener('click', _bind(function(e) {

                callback(e);

            }, element));

        }

    };

    tap(document.body, clickH);



    function clickH(e){

        var target = e.target;

        if(target.id == "foucs"){

            setFocus();

        }

        if(target.id == "blur"){

            loseFocus();

        }

    }

</script>

</html>