bug: iphone页面在input输入内容并保存时，在软键盘消失后会弹出popPicker.
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../../../css/head.css" />
<link rel="stylesheet" type="text/css" href="../../../css/mui.listpicker.css" />
<link rel="stylesheet" type="text/css" href="../../../css/mui.dtpicker.css" />
<link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
<style type="text/css">
.mui-input-group {
margin: 10px 10px;
}
.mui-input-group:before,
.mui-input-group:after {
height: 0;
}
.mui-input-row:after {
height: 0 !important;
}
.my-hobby {
margin-right: 10px;
margin-bottom: 10px;
}
.my-hobby-selected {
background-color: #A9A9A9;
color: #FFFFFF;
}
input:read-only {
color: #646464;
}
input[type=text],
input[type=password],
input[type=tel],
input[type=number] {
border: 0;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title"></h1>
<button class="mui-btn mui-btn-link mui-pull-right" style="color:white" id='btnsave'>保存</button>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row" style="display: none;">
<input type="text" id="name" name="name" class="mui-input-clear" placeholder="请输入您的艺名或姓名">
</div>
<div class="mui-input-row" style="display: none;">
<input type="hidden" id="province" name="province" readonly="readonly">
<input type="text" id="zone" name="zone" placeholder="请选择您的常驻城市" readonly="readonly">
</div>
<div class="mui-input-row" style="display: none;">
<input type="text" id="experience" name="experience" placeholder="请选择您的从业年限" readonly="readonly">
</div>
<div class="mui-input-row" style="display: none;">
<input type="text" id="market_price" name="market_price" placeholder="请输入市场价">
</div>
</form>
</div>
<script src="../../../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/citydata.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/listpicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/poppicker.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
var cityPicker, expPicker;
var init = function() {
//城市下拉框
cityPicker = new mui.PopPicker({
layer: 2
});
cityPicker.setData(cityData);
expPicker = new mui.PopPicker();
var expprms = [];
for (var i = 1; i < 21; i++)
expprms.push({
value: i,
text: i + '年'
});
expprms.push({
value: '20+',
text: '20年以上'
});
expPicker.setData(expprms);
};
var citySelect = function() {
var obj = this;
cityPicker.show(function(items) {
var pattern = /.省|内蒙古|西藏|广西|宁夏|新疆/i;
var addr = pattern.test(items[0].text) ? items[1].text : items[0].text;
document.querySelector("#province").value=items[0].text.replace(/省|市/i, '');
obj.value = addr;
obj.setAttribute('data-value', addr);
});
};
var experienceSelect = function() {
var obj = this;
expPicker.show(function(items) {
obj.value = items[0].text;
obj.setAttribute('data-value', items[0].value);
});
};
var saveData = function(cb) {
};
var bindEvent = function() {
document.querySelector('#btnsave').addEventListener('tap', saveData);
document.querySelector('#zone').addEventListener('tap', citySelect);
document.querySelector('#experience').addEventListener('tap', experienceSelect);
};
var showContainer = function() {
var name = plus.webview.currentWebview().data.name || '';
var mtitle = {};
mtitle['name'] = '艺名/姓名';
mtitle['zone'] = '常驻城市';
mtitle['experience'] = '从业年限';
mtitle['market_price'] = '市场价格';
document.querySelector('.mui-title').innerText=mtitle[name];
document.querySelector("#" + name).parentNode.style.display='block';
if (name == "experience" || name == "zone") {
//TODO ios上输入框--保存--出现bug: popPicker弹出，非调用不初始化
init();
}
};
showContainer();
//init();
bindEvent();
})
</script>
</body>
</html>
小云菜 (作者)
在ipad，iphone上都有问题
2015-08-27 15:38