今日小结：移动端打电话、pc端复制功能

来源：情诗网 2020-11-15 分类：高端情话

好久没写文字了，趁下班，把今天用到的一些知识点记录一下，以供后期参考。

1. 怎么判断是移动端还是PC端？

这个很简单，参考 window.navigator.userAgent 属性。

下图为我在 chrome 浏览器控制台打印的navigator：

ua1.png

js 通过判断ua是否含有某些字段，来区分移动端 or pc端：

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        alert("您使用的是移动设备！");
        // mobile do something...
} else {
       console.log("当前设备为PC端！");    
       // PC do something...    
}

知识点：

navigator 对象下挂载的众多属性的含义，自行百度，脑补。
移动设备包含的字段，区分Android、iOS、 WeChat browsers。
正则表达式的使用，自行百度，脑补。
match() 、test() 方法或者最简单的使用 indexOf() 匹配字段。
UA嗅探技术，存在缺陷，毕竟用户可以自定义自己的浏览器信息，所以说这个存在风险。

移动端拨打电话功能实现？
最简单的实现方法，不用掉接口，直接使用 a 标签的 href属性。

若tel后面跟的是合法的手机号的话，在手机上点击就会进入拨号界面，注意在PC端是不行的，PC不支持打电话。
若tel后跟的是非法的手机号，比入"--" , 虽然会进入拨号界面，但是号码为空。
Android 与 IOS 系统，打电话弹出方式会有不同，有个别区别，但是功能相同。

<a style='color: rgb(2, 247, 2);text-decoration:none;font-size:1rem;' href='tel:17317588477'>call me

3. PC端复制手机号功能？

PC端不支持打电话功能，故移动端显示的是打电话的图标，点击进入拨号功能。
若为PC端，类似toggle效果，默认显示打电话图标，点击打电话图标显示手机号码，同时隐藏打电话图标，点击手机号码，进行复制，同时隐藏手机号，显示打电话图标。

js实现复制功能，实现方法太多，举最简单的为例：

 <textarea cols="20" rows="10" id="write-container" placehold="请在此处自定义文本内容..."></textarea>
 <button  onClick="copyUserWriteContain()" >复制</button>
<script type="text/javascript">
  function copyUserWriteContain() {
      var valBox=document.getElementById("write-container");
      valBox.select(); // 选择文本对象
      document.execCommand("Copy"); // 浏览器执行复制命令
      alert("文本内容已复制好，去贴粘！");
   }
</script>

注意：文本容器标签换成其他的标签（非input、textarea类标签），不能复制其文本，select() 触发会报错。
textarea 右下角自带三斜杠样式，丑，而且不需要。
input 相较于 textarea 更适用于单行文本，无论是使用input或者textarea 其样式都要和整体保持一致，这个自己视具体场景自行调试，换句话说样式都要自己重写覆盖。

4. input 设置disable 与readonly 区别：

两者设置之后，都会禁止用户输入，这正好符合我的需求，只可复制手机号，不可编辑修改。

disabled：不可编辑，鼠标悬浮禁用提示，复制功能会有问题，disabled之后，标签的内容禁止复制，即使复制，内容为空。

readonly：不可编辑，复制功能没问题。

更具体的原因，请百度disabled与readonly深度解析...

5. input单标签，只有开始标签，无结束标签，设置readonly后勿将要包裹的文本直接随其后

例子1：

   temp += "<p id='show-tel-pc' style='display:none;'>"+
            "<input readonly style='font-size:1rem;' id='copy-mobile-val'>"+tMobile+"</p>";

例子2：

   temp+= "<p id='show-tel-pc' style='display:none;'>"+
          "<input style='font-size:1rem;background: #141414;cursor:pointer;' readonly id='copy-mobile-val' value='"+tMobile+"'></p>"+

两者唯一的区别就是：

例子1将包裹的文本，紧随其后，导致文本换行，文字并不在input内，与设置的readonly有关系，无法写入。
例子2直接将要包裹的文本传入value属性，让input直接包裹，文本显示在input内部。

6. 电话长度过长，点击显示电话号码，位置偏移，怎么固定？

方法1：父标签设置宽度100%，子容器设置宽度50%，float，位置需进行微调。
方法2：设置父容器relative定位，设置子容器absolute定位，然后微调子容器left值，最好用%做单位。

7.纯原生代码参考

<style type="text/css">
    .img-center{
      margin-top: 0.2rem;
        text-align: center;
    }
    .content-center{
        display: inline-flex;
    }
    .tenant-name{
      display:inline-block; 
      color: #82AF6F; 
      font-size:1rem;
      margin-top: 1.3rem;
      margin-bottom: 0.4rem;
      //padding-left:0.3rem;   
      width:100%;
      text-align:center;
    }
    .tel{
       //padding-left:0.3rem;   
      width:100%;
      text-align:center;
    }
</style>
<div id="tenantDir-info" class='img-center'>    
</div>
<script>
    var tboxId = "tenantDir-info";
    var tarr = global_metric_data;
    showTenantDirInfos(tarr, tboxId);
    function showTenantDirInfos(dataArr, domId){
        document.getElementById(domId).parentNode.parentNode.parentNode.style.padding = "0"; 
        var temp = "";
        if(!dataArr || dataArr.length==0){
        
            return;
        }

        var tWorkNo ="https://view.baocloud.cn:7090/bsview/upload-image/human.png", tName = "--", tMobile = "--";
        for(var i = 0; i < dataArr.length; i++){
            if(dataArr[i].label == 'tenantDirector'){
                tWorkNo = "https://view.baocloud.cn:7090/bsview/profile/"+dataArr[i].valueFormatted+".png";
            }
            if(dataArr[i].label == 'tenantDirectorName'){
                tName = dataArr[i].valueFormatted;
            }
            if(dataArr[i].label == 'mobilePhone'){
                tMobile = dataArr[i].valueFormatted;
            }
        }

        temp += "<div class='content-center'>"+
                    "<div style='width: 50%;padding-top:0.3rem;'>"+
                    "<img src='"+tWorkNo+"' style='margin-top:14px;border-radius:50%;'>"+
                    "</div>"+
                    "<div style='padding-top: 0.4rem;width:50%;position:relative;'>"+ 
                      "<p class='tenant-name'>"+tName+"</p>";

        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            if(tMobile=='--'){
                temp += "<p class='tel'><span style='font-size:0.8rem;color: red;'>暂无号码</span></p></div></div>";
            }else{
                temp += "<p class='tel'><a style='color: rgb(2, 247, 2);text-decoration:none;font-size:1rem;' href='tel:"+tMobile+"'><img style='height:2rem' src='https://view.baocloud.cn:7090/bsview/upload-image/telephone.svg'></a></p></div></div>";
            }
        } else {
            // temp += "<p class='tel'><span style='font-size:1rem;color: rgb(2, 247, 2);'>"+tMobile+"</span></p></div></div>";
            temp += "<p id='tel-click-pc' class='tel'><a style='color: rgb(2, 247, 2);text-decoration:none;font-size:1rem;'><img style='height:1.8rem' src='https://view.baocloud.cn:7090/bsview/upload-image/telephone.svg'></a></p>"+
            "<p id='show-tel-pc' style='display:none;border-radius:5px;cursor:pointer;position: absolute;left: 5%;'><input style='font-size:1rem;background: #141414;cursor:pointer;' readonly id='copy-mobile-val' value='"+tMobile+"'></p>"+
            "</div></div>";
        }

        document.getElementById(domId).innerHTML = temp;
        document.getElementById('tel-click-pc').onclick=function(){
            this.style.display = 'none';
            document.getElementById('show-tel-pc').style.display = 'block';
        }
        
        document.getElementById('show-tel-pc').onclick=function(){
            var mobileVal=document.getElementById("copy-mobile-val");
            mobileVal.select(); 
            document.execCommand("Copy"); 
            this.style.display='none';
            document.getElementById('tel-click-pc').style.display = 'block';
            alert("手机号码已复制！");
        }
    }
</script>

使用原生js绑定事件，要注意必须是这个dom已存在，才可以使用document.getElementById绑定click事件，因为我写的是先return dom，然后绑定事件，有先后顺序，所以不需要注意这个问题。
判断节点是否存在, jQ 与 js 区别：

<script>
// 原生js   只使用要判断的节点比较少的情况
if(document.getElementById('tel-click-pc')){
       // 节点存在 do something
}

// jQuery  jQ包装过后的dom均为object，要判断其是否存在，不能用上面的写法
if($(#id).length > 0){
    // 判断length > 0， 节点存在 do something
}
</script>