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(); 

 

posted @ 2021-12-31 16:04  Cx随  阅读(141)  评论(0)    收藏  举报