动态查询赋值 poppicker 下拉框
// 可以把这个方法放到Ajax查询的回调方法中
function fnInitPickerServiceype(json){
var arr = [];
var jsonObjs = json.objs;
if(json != null && json.objs != null && json.objs.length > 0) {
$.each(jsonObjs, function(i, obj) {
var value = jsonObjs[i].id;
var name = jsonObjs[i].name;
arr.push({value:value,text:name});
});
}
mui.init();
mui.ready(function() {
var serviceypePicker = new mui.PopPicker();
serviceypePicker.setData(arr);
var serviceypeButton = document.getElementById('serviceClassifyIdDiv');
var serviceypeResult = document.getElementById('serviceClassifyId');
serviceypeButton.addEventListener('tap', function(event) {
serviceypePicker.show(function(items) {
serviceypeResult.value = items[0].text; //如果是input框
serviceypeResult.innerText = items[0].text; //如果是div框
});
}, false);
});
}
解决poppicker 和上拉加载冲突
var picker = new mui.PopPicker({
buttons: ['取消', '确认']
})
picker.setData(carList);
var select = document.getElementById('selectCity');
select.addEventListener('tap', function(event) {
mui('#refreshList').pullRefresh().disablePullupToRefresh(); //禁用上拉加载
picker.show(function(item) {
document.getElementById('selectCity').value = item[0].text;
})
},false);
var html = document.querySelector('html');
html.addEventListener('tap', function(event) {
mui('#refreshList').pullRefresh().enablePullupToRefresh(); //启用上拉加载
mui('#refreshList').pullRefresh().refresh(true);
},true);
这是通过addEventListener()方法实现的,如果这个函数的最后一个参数是true,则在捕获阶段绑定函数(从外到里),反之false,在冒泡阶段绑定函数(从里到外)。
禁用重启滚动条
$('.mui-content').css({'overflow-y':'hidden','height':'100vh'}); //暂时禁用滚动条
$('.mui-content').css({'overflow-y':'auto','height':'auto'}); //重新开启滚动条
模拟上滑取消录音
var startY; // 起点座标
var Y; // 手指滑动距离
$("body").on("touchstart", function(e) {
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
var moveEndY = e.originalEvent.changedTouches[0].pageY; // 终点座标
Y = moveEndY - startY; //计算手指滑动距离
});
if(Y < -20) { //上滑一定距离代表是上滑则取消事件的执行
return;
}
弹出框禁止遮罩层移动
document.addEventListener('touchmove', function (event) { //监听滚动事件
event.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
},{passive:false}); //不能省略,为了兼容IOS
打开页面默认弹出软键盘,同时兼容iOS和Android
注:input不需要添加autofocus属性。
function open_soft_keyboard(){
if(plus.os.name == 'iOS'){
setTimeout(function(){
var wv_current = plus.webview.currentWebview().nativeInstanceObject();
wv_current.plusCallMethod({"setKeyboardDisplayRequiresUserAction":false});
document.querySelector('input'); //光标自动定位到页面第一个input框
}, 330);
}else{
// 因为安卓autofocus只有4.0版本以上才支持,所以这里使用native.js来强制弹出
setTimeout(function(){
// 在执行的时候需要让当前webview获取焦点
var wv_current = plus.android.currentWebview();
plus.android.importClass(wv_current);
wv_current.requestFocus();
var Context = plus.android.importClass("android.content.Context");
var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
var main = plus.android.runtimeMainActivity();
var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.toggleSoftInput(0,InputMethodManager.SHOW_FORCED);
document.querySelector('input'); //光标自动定位到页面第一个input框
}, 330);
}
}
监听手机软键盘弹出收起
软键盘弹起和收起在 IOS 和 Android 上的表现不尽相同。
IOS
软键盘弹起表现
在 IOS 上,输入框( input、 textarea 或 富文本)获取焦点,键盘弹起,页面( webview)并没有被压缩,或者说高度( height)没有改变,只是页面( webview)整体往上滚了,且最大滚动高度( scrollTop)为软键盘高度。
Android
软键盘弹起表现
同样,在 Android 上,输入框获取焦点,键盘弹起,但是页面( webview)高度会发生改变,一般来说,高度为可视区高度(原高度减去软键盘高度),除了因为页面内容被撑开可以产生滚动, webview 本身不能滚动。输入框失去焦点时,软键盘收起,输入框并不会失去焦点。
监听软键盘弹起和收起
Android
//获取原窗口的高度
$(window).resize(function(){
//键盘弹起与隐藏都会引起窗口的高度发生变化
if($(window).height() == MAX_HEIGHT){
//当软键盘弹起,在此处操作
}else{
//当软键盘收起,在此处操作
}
}
IOS
window.addEventListener("focusin", function(event) {
alert("IOS弹出键盘")
})
window.addEventListener("focusout", function(event) {
alert("IOS收起键盘")
})
focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。
ios系统上input输入框无法输入值
只要在input 元素或者父元素上面加上css样式 -webkit-user-select: text 就可以了。
<input style="-webkit-user-select: text;"/>
在IOS系统中输入光标过大的问题
① 在textarea中换行,第二行的光标会变大
line-height是行间距,在你只有一行字的时候,没有行间距,所以在只有一行的时候,第一行不高,有了第二行的时候就高了。
所以这种情况添加 line-height 属性就行了。
<textarea style="line-height: 15px;" maxlength="100" rows="7"></textarea>
② input框的光标过大
问题也是同上面一样,设置一个合理的line-height值就可解决问题。
两个输入框之间切换时抖动
其实2个输入框切换时 抖动的原因也很简单。例如我们在两个输入框之间切换,页面会首先触发 A 输入框 的 blur 事件,接着触发 B 输入框 的 focus 事件。
这样的话,在 blur 时会触发我们的 window.scrollTo(0,0) 导致页面往下滚一下,接着 B 输入框 聚焦,于是键盘继续弹起,这导致页面再次向上移动。
其实,在两个输入框之间切换这种操作时,我们就没必要触发第一个输入框 blur 时的 window.scrollTo 行为了。
因此看我们修改下我们的代码,让输入框切换这种操作发生时,可以切断第一个输入框的行为。这里我们用 setTimeout 来解决:
function inputBlur(e) {
// 首先,判断触发事件的目标元素是否是input输入框,我们只关注输入框的行为。
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
// 输入框失去焦点,要把IOS键盘推出页面的滚动部分还原。即将页面滚动到视窗顶部对齐
this.timer = setTimeout(() => {
console.log('timer触发')
}, 0)
}
},
function inputFocus(e) {
// 如果focus,则移除上一个输入框的timer
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
clearTimeout(this.timer);
}
}
在ios里面,当一个文本框的样式为fixed时候,如果这个文本框获得焦点,它的位置就会乱掉,由于ios里面做了自适应居中,这个fixed的文本框会跑到页面中间。