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

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

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 系统，打电话弹出方式会有不同，有个别区别，但是功能相同。

call me

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

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

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

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

4. input 设置disable 与readonly 区别：

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

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

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

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

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

例子1：

   temp += ""+
            ""+tMobile+"";

例子2：

   temp+= ""+
          ""+

两者唯一的区别就是：

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

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

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

7.纯原生代码参考

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