H5移动端浏览网页问题的部分解决代码
本人前端小白一个,这些都是我写h5移动端浏览器页面代码遇到的一些问题的解决代码,虽然大部分都是从网上百度下来的,但是确实解决了我开发中遇到的问题,所以写到博客上。不是什么难搞的问题,都是一些小问题的解决代码。
1.通用邮箱和二级域名邮箱的js正则表达式:
var emailgs = /^[0-9a-z][a-z0-9\._-]{1,}@[a-z0-9-]{1,}[a-z0-9](\.[a-z]{1,})+$/;
2.禁止外部拖动-jquery的写法:
$("").on("touchmove",function(e){ e.preventDefault(); });
3.ios微信浏览器上图片识别问题:
(1)ios上长按识别二维码图这个CSS 属性禁用了默认的callout展示, callout是指当触摸并按住一个元素的时候出现的提示。
(2)处理iOS系统h5页面长按二维码图片不识的问题:-webkit-touch-callout:none;
4.针对苹果手机按钮音效点击只响一次的问题
document.getElementById('anniuYY_btn').load();
document.getElementById("anniuYY_btn").volume =1.0;
document.getElementById("anniuYY_btn").play();
5.在微信浏览器自动播放音乐
document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById("bgMusic").play();
}, false);
6.解决input、textarea等输入框输入中文时,拼音在输入框内会触发input事件的问题
let flag = true;
$('#textareaText').on({
'compositionstart':function(){flag = false;},
'compositionend':function(){flag = true;},
'input propertychange':function(){
var _this = this;
setTimeout(function(){
if(flag){ //执行字数限制代码或者获取用户输入赋值代码
let txtval = $('#textareaText').val().replace(/\s+/g,"").length; //获取textarea里面去掉空格后用户所输入的字数长度
if(txtval >= 150){ //判断长度是否大于150个字
document.getElementById("textareaText").value=document.getElementById("textareaText").value.replace(/\s+/g,"").substr(0, 150); //大于150个字后,只截取前面150个字赋值给textareaText
txtval = 150;
$("#textareaText").attr("maxlength",txtval); //设置textarea的最大长度为150
}
$("#wordslength").html(txtval+"/150"); //显示用户实时输入的字数,最多只能输入150个
}
},0);
}
});
7.jquery判断css动画结束代码
/* css动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
.div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
$(".div").on("webkitAnimationEnd",()=>{
console.log("动画结束");
});
8.jquery清除元素添加的事件
$(".page1Icon1s").on("click",function(){
console.log("添加了点击事件");
});
//移除的点击事件
$('.page1Icon1s').unbind();
浙公网安备 33010602011771号