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

已于 2022-06-08 10:16:55 修改
阅读量1.6k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： h5
于 2021-06-09 09:46:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47346395/article/details/117731221
版权
本文介绍了如何在H5页面中利用Vant的ActionSheet组件，实现在用户点击电话号码时弹出操作面板，用户可以选择呼叫或复制电话号码到手机剪切板。点击呼叫按钮会直接启动手机拨号功能，而点击复制则能将号码保存到剪切板。
摘要由CSDN通过智能技术生成

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

  1. 在index.html中添加meta标签:<meta name="format-detection" content="telephone=yes"/>
  2. 引入vant的ActionSheet 动作面板来优化用户的使用操作：
 <!-- 电话弹出层 -->
    <van-action-sheet
      v-model="showCall"
      :actions="actions"
      cancel-text=
最低0.47元/天 解锁文章
iyy.
关注
专栏目录
高级岗位面试问题
A-MING的博客
10-11 495
【我是谁】 、【我做过什么】、【我会什么】面试官您好，我叫XXX，来自XX。已有4年软件测试工作经验，之前在两家公司担任测试工程师最近一家公司我主要负责了两个项目的测试，分别为挂机短信和来电名片，在这两个项目中我负责了测试计划和方案的编写，测试用例的设计，测试环境的搭建以及测试用例执行、编写测试报告等工作。在工作中我主要负责功能测试、接口测试 、性能测试、包括搭建测试框架；
【H5页面嵌入到小程序或APP中实现手机号点击复制和拨号功能】
m0_56026872的博客
08-28 6333
在H5界面嵌入到小程序和移动应用（安卓和iOS）中实现手指点击手机号弹出弹窗，包含呼叫和复制选项，是可以实现的。下面我将为你提供一个基本的示例，并解释在小程序、安卓和iOS中要做的支持工作。
html5 获取剪切板内容,H5剪切板功能
weixin_34478373的博客
06-10 2523
最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况：1.不带input输入框的原生js方法这种情况适用于复制非输入框中的文本到剪切板被复制的内容点击复制(function(){button.addEventListener('click', function(){var copyDo...
H5实现带电话号码跳转到手机呼叫
yiguoxiaohai的博客
08-23 374
H5实现带电话号码跳转到手机呼叫
h5 页面复制内容到剪切板，然后登陆app获取剪切板内容 h5+uniapp电商app
yehaocheng520的博客
11-06 3225
砍价功能剪切板 最近公司在做电商中的砍价活动，如果在电商app中分享砍价商品信息到微信好友，展示的是一个h5链接的形式。 下图分别是从 电商app分享砍价商品 分享到微信好友 砍价需要下载的电商app页面 电商app 分享功能（分享到微信好友） share(item) { // 分享图文到微信聊天界面 uni.share({ provider: "weixin", // 服务商 scene:
html5 获取剪切板内容,H5实现复制粘贴功能
weixin_36213934的博客
06-10 4681
H5就是移动端的web页面，现在可以说是非常的流行！今天就把我用H5实现复制粘贴功能分享出来给大家吧！方案一 ： 可满足大部分浏览器正常使用！copy exampleCopyvar copyBtn = document.querySelector('.copy')// 点击的时候调用 copyTextToClipboard() 方法就好了.copyBtn.onclick = function() ...
取得剪贴板上的内容
guopeng_028的专栏
01-03 894
private void button1_Click(object sender, System.EventArgs e) { // Create a new instance of the DataObject interface. IDataObject data = Clipboard.GetDataObject(); // If the data is text, then set the
js读写剪切板（兼容H5）
--=
04-03 675
js读写剪切板（兼容H5） 13 / 100
小程序 与 App 与 H5 之间的区别
12-01 1201
小程序的实现原理   根据微信官方的说明，微信小程序的运行环境有 3 个平台，iOS 的 WebKit（苹果开源的浏览器内核），Android 的 X5 (QQ 浏览器内核)，开发时用的 nw.js（C++ 实现的 web 转桌面应用）。 平台渲染js 运行环境 iOSWKWebViewJavaScriptCore AndroidX5 基于 Mobile Chrome 37 内核X5...
软件测试精华总结，入门到精通全流程（必看，知识点很全）
公众号已改名为-程序员阿沐
03-01 6332
软件测试精华总结，入门到精通全流程（必看，知识点很全）
[渝粤教育] 南阳医学高等专科学校 医学计算机与信息素养 参考 资料
03-21 1599
教育 -医学计算机与信息素养-章节资料考试资料-南阳医学高等专科学校【】 随堂测验 1、【单选题】电子数字计算机最重要的特征是（ ）。 A、高速度 B、高精度 C、存储程序自动控制 D、记忆力 参考资料【 】 2、【单选题】计算机经历了四代的发展，其中第三代计算机的主要组成部件是（ ）。 A、电子管 B、晶体管 C、小规模集成电路 D、大规模和超大规模集成电路 参考资料【 】 3、【单选题】国际上对计算机进行分类的依据是（ ）。 A、计算机的型号 B、计算机的速度 C、计算机的性
全网最全h5调用剪切板方法亲测可用
weixin_49798182的博客
11-30 1742
1， 最老版本 document.execCommand("copy");已经被淘汰了，而且测试还不好用！这其中 用了 三种方法 ，只有引用使用 ClipboardJS 引入外部库才可以，2，下边这种是要vue安装的，有环境限制，像我中原生党不行！
移动端h5点击按钮复制指定的文本至手机的剪切板
宋坚强大大~~
04-22 3548
一般在移动端页面，会禁止页面元素可选择。 但是也会出现这种需求。 点击复制按钮 复制前边的文案。 这里给大家推荐一个js插件。传送门===》clipboardjs实现h5复制功能 使用步骤： 安装 npm install clipboard --save 引入import ClipboardJS from 'clipboard' 使用 ...
微信html5复制剪切板,微信h5实现复制内容到剪贴板，两种方法
weixin_40005373的博客
06-07 1358
先介绍第一种，这种方法对ios有一些不兼容，不过也看运气先写HTML内容微信：22复制JS代码首先引入jq$(".copy")[0].onclick = function(){var txt = $('#wxContent').text();Copy(txt);}// 复制微信号函数function Copy(str) {var save = function(e) {e.clipboardDat...
h5 a标签href属性 点击手机号拨打电话
MtangEr的博客
01-23 8841
h5 a标签href属性 点击手机号拨打电话 直接将电话绑定到href属性中 直接代码： &lt;a href="tel:13512341234" class="call"&gt;13512341234&lt;/a&gt;。 vue动态绑定： &lt;a :href="'tel:'+i.mobile" class="call"&gt;{{i.mobile}}&lt;/
h5页面实现点击调用拨打电话功能
唐屁屁
04-02 1365
只需要运用到a标签，一行代码： <a :href="'tel:' + '电话号码'" ></a>
微信小程序点击复制文本到剪切板，获取剪切板内容
S筱潇S四维Smile
07-16 6455
设置剪切板：wx.setClipboardData 获取剪切板：wx.getClipboardData api:https://developers.weixin.qq.com/miniprogram/dev/api/device/clipboard/wx.setClipboardData.html wxml: <view>内容：{{contents}} </view> <view bindtap='copyText' data-text="{{contents}}
h5 唤起拨打电话功能
weixin_42896278的博客
03-06 9707
场景：我们h5的页面，有个拨打电话的按钮或者图标，当我们点击的时候，会唤起一个确认拨打电话号码的弹窗，点击呼叫即可拨打号码。 那如何用h5来实现呢，请听以下分解： 第一步：head添加meta，添加两个属性和值name="format-detection"和content=“telephone=yes”，如： &lt;meta name="format-detection" content="te...
H5页面（微信也可）中调用手机拨打电话功能
qq_33290968的博客
03-29 3724
正常情况下直接调用如下代码： <a href="tel:13555555555">打电话</a> Vue中使用动态绑定 <a :href="'tel:'+phone">打电话</a> 如果要在组件内使用次功能，需要用a标签包裹组件才可生效 <a :href="'tel:'+phone"><van-button type="primary">联系用户</van-button></a> 上面的代码在绝大多数手机
uni-app vue h5 复制到剪切板ios不生效问题
最新发布
09-23
uni-app 是一套基于 Vue.js 开发跨平台应用的框架，它允许开发者编写一次代码，生成适用于iOS、Android等不同平台的应用。然而，在某些情况下，尤其是涉及到复制到剪贴板的操作时，可能会遇到在iOS设备上无法正常复制的问题。 在 iOS 中，由于安全性和隐私策略限制，浏览器默认禁止了直接的 HTML5 `clipboard.writeText` API 对粘贴板操作的访问。这意味着在 iOS 的 Safari 和其他基于 WebKit 浏览器内，你不能像在桌面浏览器那样简单地通过 JavaScript 直接复制文本到剪贴板。为了解决这个问题，你需要： 1. 使用 Uni-app 提供的原生API支持：uni-app 提供了一种叫做 `uni.copyToClipboard` 的方法，这是通过调用系统级别的 API 来绕过安全限制。在 Vue 组件中使用时，需要引入对应的原生方法并处理兼容性问题。 ```javascript import { copyToClipboard } from '@dcloudio/uni-app'; async handleCopy(text) { try { await copyToClipboard(text); // 提示用户成功复制 console.log('已复制到剪贴板'); } catch (err) { console.error('复制失败', err); // 没有复制成功的提示 } } ``` 2. 使用第三方库：有时可以尝试使用一些插件或者库来间接实现复制功能，如 `clipboard.js` 或者 `vue-copy-to-clipboard`，但它们可能需要适配 uni-app 平台。 尽管如此，iOS 系统的体验通常会有所不同，比如需要用户点击复制按钮或者唤起系统的复制功能。如果你发现这个功能在实际项目中还是有问题，建议查看官方文档或查阅相关解决方案以获取最新的解决方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值