美文网首页
东航电商前端技术周刊第二期20180608

东航电商前端技术周刊第二期20180608

作者: f2c3df939176 | 来源:发表于2018-06-07 22:01 被阅读0次

    1. 移动端输入框弹起影响布局(包括fixed布局情况)


    2. safari中,有些元素点击事件不触发,或者300ms延迟(这里300ms延迟不使用第三方插件亦可解决)


    3. js正则表达式


    4.跳转登陆再跳回当前页面这个坑,爬了一下午才上来,重点就是要有&channel=DSGS(对就是它,电商公司专用!!)


    一  移动端输入框弹起影响布局(包括fixed布局情况)

    使用  window.scrollIntoViewIfNeeded

    具体代码

    window.addEventListener('resize',function(){

          if(document.activeElement.tagName === "INPUT" || document.activeElement.tagName               === "TEXTAREA"){

          window.setTimeout(function(){

                document.activeElement.scrollIntoViewIfNeeded();        },20)

        }

    })

    监听resize,当是input或者textarea的时候,触发此函数

    (PS: ①、使用 === 而不是 ==  的原因是, === 比 == 的速度要快;②、setTimeout最小执行毫秒数是20,而不是0,就算设置是0,也会有20ms的延迟。通常情况下,这段代码可满足。 详情查阅MDN) 

    二 safari中,有些元素点击事件不触发,或者300ms延迟(这里300ms延迟不使用第三方插件亦可解决)

    ①、元素点击事件不触发,原因是,低版本safari认为div、span等为非可点元素,可以添加css属性   cursor:pointer;  解决。或者使用button元素,记:

    button元素 中文本  ,IE9以下浏览器,获取$("button").val()或者$("button").attr("value")获取到的是“文本”,而不是value=1这个value。 所以尽量保证value和button标签中间文字内容一样。另,在form中默认button元素为submit,所以修改type为button,还有一个type值是reset。(PS:记得清除button默认样式)。

    ②、300ms问题,不使用第三方click处理插件,使用css3语法  touch-action:manipuation     (PS: 详情查阅MDN)

    ------------------------------------------感谢赵丹老师的热情分享~------------------------------------------------

    三  js正则表达式

    常见正则总结:

    //判断输入内容是否为空

     function IsNull(){

        var str = document.getElementById('str').value.trim();

        if(str.length==0){

        alert('对不起,文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称!')

        }

    }

    //判断日期类型是否为YYYY-MM-DD格式的类型  

    function IsDate(){

        var str = document.getElementById('str').value.trim();

        if(str.length!=0){

            var reg =/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;

            var r =str.match(reg);

            if(r==null){

                alert('对不起,您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!');

            }

    }

    //判断日期+时间类型是否为YYYY-MM-DD hh:mm:ss格式的类型

    function IsDateTime(){

        var str =document.getElementById('str').value.trim();

        if(str.length!=0){

                var reg =/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;

                var r =str.match(reg);

                if(r==null)

            alert('对不起,您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!‘)

    }

    }

    //判断时间类型是否为hh:mm:ss格式的类型function IsTime()

    {

    var str = document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^((20|21|22|23|[0-1]\d)\:[0-5][0-9])(\:[0-5][0-9])?$/

    if(!reg.test(str)){

    alert("

    对不起,您输入的日期格式不正确!");//请将“日期”改成你需要验证的属性名称!

    }

    }

    }

    //

    判断输入的字符是否为英文字母

    function IsLetter()

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^[a-zA-Z]+$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的英文字母类型格式不正确!");//请将“英文字母类型”改成你需要验证的属性名称!

    }

    }

    }

    //判断输入的字符是否为整数 

    function IsInteger()

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^[-+]?\d*$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的整数类型格式不正确!");//请将“整数类型”要换成你要验证的那个属性名称!

    }

    }

    }

    //

    判断输入的字符是否为双精度

    function IsDouble(val)

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^[-\+]?\d+(\.\d+)?$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的双精度类型格式不正确!");//请将“双精度类型”要换成你要验证的那个属性名称!

    }

    }

    }

    //

    判断输入的字符是否为:a-z,A-Z,0-9 

    function IsString()

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^[a-zA-Z0-9_]+$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!

    }

    }

    }

    //

    判断输入的字符是否为中文

    function IsChinese()

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^[\u0391-\uFFE5]+$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!

    }

    }

    }

    //

    判断输入的EMAIL格式是否正确

    function IsEmail()

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!

    }

    }

    }

    //

    判断输入的邮编(只能为六位)是否正确

    function IsZIP()

    {

    var str =document.getElementById('str').value.trim();

    if(str.length!=0){

    reg=/^\d{6}$/;

    if(!reg.test(str)){

    alert("

    对不起,您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称!

    }

    }

    }

    // Url验证正则

    function phone() {

    var httpUrl=document.getElementById('phone').value;

    if(!(/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/ .test(httpUrl))){

       alert("url有误,请重填"); 

       return false;

    }

    };

    //手机验证正则function phone() {

    var phone =document.getElementById('phone').value;

    if(!(/^1([38]\d|4[57]|5[0-35-9]|7[06-8]|8[89])\d{8}$/.test(phone))){

       alert("手机号码有误,请重填"); 

       return false;

    }

     };

    //固定电话正则

    functioncheckTel(){

    var tel = document.getElementById('tel').value;

    if(!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(tel)){

    alert('固定电话有误,请重填');

    return false;

    }

    }

    //身份证正则:

    //code from http://caibaojian.com/regexp-example.html

    //身份证正则表达式(15位)

    isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

    //身份证正则表达式(18位)

    isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;

    身份证正则合并:(^\d{15}$)|(^\d{17}([0-9]|X)$)

    --------------感谢李楠老师的热情分享------------------------------------------------------------------------------

    四:跳转登陆再跳回当前页面这个坑,爬了一下午才上来,重点就是要有&channel=DSGS(对就是它,电商公司专用!!)

    window.location.href = "https://m.ceair.com/mobile/user/user!loginOtherPage.shtml?act=outerLink&channel=DSGS" + "&redirectUrl=" + decodeURIComponent(redirectUrl);

    -------------感谢何玉老师的热情分享-------------------------------------------------------------------------------

    相关文章

      网友评论

          本文标题:东航电商前端技术周刊第二期20180608

          本文链接:https://www.haomeiwen.com/subject/dsmnsftx.html