input、textarea 移动端自动滚动啊可视区域
const activeElement = document.activeElement
if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
setTimeout(() => {
activeElement.scrollIntoView()
}, 100)
}
})
#**########################方法二#################################### 2.
$(function() {
//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法
window.addEventListener("resize", function() {
// alert("sdf")
if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
}, 100);
}
})
})
移动端点击事件
1. click事件
单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟
2. touch类事件
触摸事件,有touchstart touchmove touchend touchcancel 四种之分
touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时,会触发
touchend:当手指离开屏幕时,会触发
touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件
例子:
obj.addEventListener('touchstart', 函数名);//触摸开始
obj.addEventListener('touchmove', 函数名);//触摸移动
obj.addEventListener('touchend', 函数名);//触摸结束
3. tap类事件
触碰事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
4. swipe类事件
滑动事件,有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe:手指在屏幕上滑动时会触发
swipeLeft:手指在屏幕上向左滑动时会触发
swipeRight:手指在屏幕上向右滑动时会触发
swipeUp:手指在屏幕上向上滑动时会触发
swipeDown:手指在屏幕上向下滑动时会触发
IE 下input placeholder 不显示
$(function () {
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder') ) {
input.addClass('placeholder');
if(input[0].tagName=="TEXTAREA")
input.text(input.attr('placeholder'));
else
input.val(input.attr('placeholder'));
}
}).blur();
};
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
$(".accordions dt").on("click",function(){
if(!$(this).parent().hasClass("expand")){
$(this).siblings("dt").removeClass("active")
$(this).toggleClass("active")
var target = $(this).next("dd");
target.siblings("dd").slideUp();
target.slideToggle();
}
});
})
监听手机物理返回键
<!-- 监听手机返回键 -->
function addEventBack(){
pushHistory();
window.addEventListener("popstate",addBackKey, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#jjjj");
}
}
function addBackKey(){
var ua = navigator.userAgent.toLowerCase(); //判断是ios 还是 安卓
if (/iphone|ipad|ipod/.test(ua)) {
window.webkit.messageHandlers.BackClick.postMessage(null);
} else {
event.preventDefault();
window.finish.doFinish();
}
}
$(function(){
if(localStorage.getItem("isshopapp") != null ){
}else{
var ua = navigator.userAgent.toLowerCase(); //判断是ios 还是 安卓
if (/iphone|ipad|ipod/.test(ua)) {
} else {
addEventBack();
}
}
})