好久没写文字了，趁下班，把今天用到的一些知识点记录一下，以供后期参考。
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>
本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！