h5页面调用用户手机打电话功能以及复制内容到剪切板

通过配合vant的面板组件实现该功能：

在index.html中添加meta标签:<meta name="format-detection" content="telephone=yes"/>
引入vant的ActionSheet 动作面板来优化用户的使用操作：

 <!-- 电话弹出层 --><van-action-sheetv-model="showCall":actions="actions"cancel-text="取消":description="description"close-on-click-action@select="select"/>

3.当用户点击电话号码时，会弹出面板：

4. 用户点击呼叫:

 window.location.href = `tel:${电话号码}`;

这样就会打开用户手机的拨号功能。

用户点击复制号码:

 //h5复制文本到剪切板copyContentH5(content) {var copyDom = document.createElement("div");copyDom.innerText = content;copyDom.style.position = "absolute";copyDom.style.top = "0px";copyDom.style.right = "-9999px";document.body.appendChild(copyDom);//创建选中范围var range = document.createRange();range.selectNode(copyDom);//移除剪切板中内容window.getSelection().removeAllRanges();//添加新的内容到剪切板window.getSelection().addRange(range);//复制var successful = document.execCommand("copy");copyDom.parentNode.removeChild(copyDom);},

调用该方法，将号码保存至用户手机剪切板。

h5页面调用用户手机打电话功能以及复制内容到剪切板相关推荐

uniapp h5页面在移动端使用clipboardone.js插件实现写入剪切板 -- 安卓和ios安美适配（仅测试部分机型）
unipp 中的向剪切板写入内容的 api 不支持 h5页面,我们可以通过clipboardone.js 第三方插件来实现向剪切板写入内容下载包 npm npm install clipbo ...
js调用浏览器的复制功能复制内容到剪切板
js调用浏览器的复制功能: 浏览器自带复制粘贴功能,通过js调用浏览器的复制功能实现复制文本内容到剪切板浏览器复制命令:document.execCommand('Copy') 具体代码实现: // ...
微信内嵌h5页面调用拍照和相册功能？
有一个问题: 在微信内嵌h5页面中通过input调用摄像头,ios既可以调用摄像头也可以选择相册,但android只能选择相册,按照网上的兼容性(就是根据capture属性的有无)做了处理后,依然不行 ...
H5页面iphone(苹果)手机点击输入框输入内容时页面自动放大
问题: H5页面,iPhone手机点击input搜索框,输入内容时,页面会自动放大. 解决: 方法一: html文件中加上移动端元信息 <meta name="viewport&qu ...
H5页面中调起手机的电话拨打功能
在H5页面中调起手机的电话拨打功能其实很简单就能实现,代码如下: <a href="tel:13555555555">点击给我打电话</a> 但是也存在一些 ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
html5互动,制作H5页面有哪些趣味互动功能？
以前大家刚刚接触到H5页面,可能会有一种移动版的PPT的展示感受,但现在随着H5制作软件的成熟,用户在制作H5页面时,能够用上的玩法也变得越来越多,而且趣味性也有了很大的增强.具体制作H5页面能有哪些 ...
h5页面元素聚焦手机无法弹出键盘
移动端h5做手机app的直播视频碰到的问题 h5页面元素聚焦手机无法弹出键盘问题是这样产生的: 公司最近要搞一个直播的h5活动页内嵌到app上,当然我就来负责这个了. 但是这个项目我是半道接手的,原 ...

h5页面调用用户手机打电话功能以及复制内容到剪切板

h5页面调用用户手机打电话功能以及复制内容到剪切板相关推荐

最新文章

热门文章