现在的位置: 首页 > IT运维 > 正文

jqxInput处理iOS汉字输入bug的解决办法

2014年11月20日 IT运维 ⁄ 共 2062字 暂无评论 ⁄ 被围观 127+

将jqxInput官方示例简化版本如下:

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="yes" />
    <title id=\'Description\'>jqx Input test</title>
    <link rel="stylesheet" href="jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxinput.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("input");
            var countries = new Array("中国", "美国", "加拿大", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina");
            $("#input").jqxInput({ theme: theme, placeHolder: "Enter a Country", height: 35, width: \'80%\',  source: countries });
            initSimulator("input");
        });
    </script>
</head>
<body class=\'default\'>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div style=\'margin-left: 10%; margin-top: 100px;\'>
                测试输入:
            </div>
             <input style=\'margin-left: 10%; margin-top: 10px;\' type="text" id="input"/>
        </div>
    </div>
</body>
</html>

在实际测试中我们发现,上述标准代码在Android系统中表现正常,但在iOS下输入中文时出现bug,使用系统自带中文输入法仅能捕获处理输入汉字时所打拼音对应的字母/单词;使用搜狗输入法时完全没有任何响应。

解决方法:通过测试我们发现input元素仍然会响应jQuery原生的input事件,此事件对iOS原生输入法和搜狗输入法同样会做出正确响应,于是修改如下:

        $(document).ready(function () {
            var theme = prepareSimulator("input");
            var countries = new Array("中国", "美国", "加拿大", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina");
            $("#input").jqxInput({ theme: theme, placeHolder: "Enter a Country", height: 35, width: \'80%\',  source: countries });
//bug fix start
	$("#input").on(\'input\', function(){
		$("#input").jqxInput(\'suggest\');
	});
//bug fix end
            initSimulator("input");
        });

上述代码注释中间的内容即为修正代码。当然,这段修正并不完美,当source数据采用从远程网站获取时,在汉字输入过程中会造成双倍网络请求次数,如果用户数量庞大,此网络请求数量的增加将不容忽略,所以如果遇到相应情况还需再做进一步的处理,例如添加处理状态标志等

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#