h5短信验证码复制/自动填充等问题

最新推荐文章于 2022-10-14 11:39:31 发布
最新推荐文章于 2022-10-14 11:39:31 发布
阅读量3.4k 收藏 2
点赞数 3
分类专栏： 个人代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010214074/article/details/116313002
版权

1、复制验证码出现2个重复验证码以及ios不自动填充验证码（安卓不支持自动填充？）问题：

      根据验证码长度限制输入框长度

2、验证码输入区域由4个input[maxlength=1]组成，ios无法自动填充问题

      可以在视窗外增加一个隐藏的1px大小的input[maxlength=4]，监听其值变化，回填以上4个input框

3、粘贴验证码，无法立刻填满4个input框问题：

      思路：监听粘贴事件，将粘贴板上的数字赋值给以上一个隐藏的1px大小的input[maxlength=4]

     

阿之阿佐
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
自动获取短信验证码并填充
04-02
监听短信数据库变化，拿到特定号码的短信，截取中间的数字，填充到指定控件中。
获取短信验证码并自动填写demo
03-14
获取短信验证码并自动填写demo
JS复制文本到粘贴板，前端H5移动端点击按钮复制文本到粘贴板。
qq_32849999的博客
01-21 3888
方案一： 最近做手机端H5网页里面有个活动：点击按钮复制邀请码。查过一些方法，在电脑端可以复制粘贴，一放在手机上面打开网页就不能复制粘贴了。 直接进入正题 使用开源项目 clipboard.js， 官网：点击打开链接 可以通过script标签引入 也可以通过npm安装，npm install clipboard.js --save-dev。 这个插件复制的对象必须是input 或者 ...
短信验证码自动填充
yqlee2000的博客
03-31 2829
短信验证码自动填充 1、简述 不知道大家有没觉得，注册一个app的时候，还要手动输入短信验证码，挺烦的？反正我觉得是挺烦的！其实这也不是什么高深的技术，我们可以通过代码的形式，完成短信验证码的自动填充。 思路： ①、继承系统的ContentObserver类，当内容发生变化时，那么系统就会回调ContentObserver的onChange方法，观察者模式，这些都是系统帮我们完成的，我们需
H5调用系统自带短信功能并且填充内容
u012381782的博客
03-11 1334
最近做了一个功能需要通过html代码调用手机的系统自带的短信功能，采用和tel:手机号码一样的方式使用sms:10086来处理： copyToPaste(item) { try { if (item.style === 'phone') { this.presentAlertConfirm(item.value); } else if (item.style === 'weixin') { this.copyUrl(item.value
h5页面发送短信并填充带#或者+的链接
weixin_43897062的博客
10-14 510
h5调用短信并填充带有#链接
h5页面ios验证码无法自动回填到键盘问题
扮老虎的猪
06-29 1193
ios系统的h5页面，验证码无法自动回填问题的解决
js实现复制，兼容IOS
jstljspservlet的博客
09-03 926
copy: function () { // 数字没有 .length 不能执行selectText 需要转化成字符串 let input = document.querySelector('#copy-input'); if (!input) { input = document.createElement('input'); ...
html5怎么转换移动版,如何让HTML5实现移动端复制功能
weixin_42376793的博客
06-04 177
这篇文章主要介绍了HTML5实现移动端复制功能,文中还给大家介绍了使用clipboard.js实现移动端粘贴复制功能的实现代码，需要的朋友参考下吧首先遇到这个需求是就各种百度，但是发现基本都是用js实现，而且兼容性还非常不好。但是在寻觅和尝试的过程中，发现只需要css代码也可以完全实现的，对需要复制内容的标签加上下面这几行代码就可以了。-webkit-touch-callout: all;-web...
在uniapp的H5页面中使用复制粘贴功能
Nancy617的博客
04-27 934
在uniapp的H5页面中使用复制粘贴功能 1.安装插件 命令行 npm i clipboard --save 在main.js中加入： import Clipboard from 'clipboard'; 2.在页面中使用 html部分： <text class="copy_txt" @tap="copy(code)">复制链接分享</text> js部分： copy(code) { let clipboard = new Clipboard('.copy_txt',
H5U固件升级包，H5U/H5U-A8/H5U-A16/H5U-A8S
最新发布
09-05
H5U固件升级包，H5U/H5U-A8/H5U-A16/H5U-A8S
全新UI简洁H5商城网站源码/带易支付接口
04-15
全新UI简洁H5商城网站源码，带有易支付接口，一款比较简单的H5移动端购物商城系统源码，比较适合单品商城、小型商城使用。
支持移动端的滑块式验证码h5插件
06-14
支持移动端的滑块式验证码h5插件
es6的一些笔记（数组去重，new Set()）
热门推荐
阿之阿佐
04-18 5万+
new Set()，用来去重数组。let arr = [1, 2, 2, 3];let set = new Set(arr);let newArr = Array.from(set);console.log(newArr); // [1, 2, 3]Set类似于数组，区别在于它所有的成员都是唯一的，不能有重复的值...
vue+element-ui，树形表格，可以做权限管理模块，可折叠，全选，部分全选
阿之阿佐
07-13 4万+
html部分： class="role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2"> class="header"> class="left">菜单列表 class="right">功能权限 class="vertical-line"> v-for="(item
element table 自定义表头
阿之阿佐
03-07 1万+
companyRenderHeader(h, { column, $index }){ return h("span",[ h("span",{ "class":{ "red-star":true } },"*"), h("span","委托方"), ]) 官网api: https://cn.vuejs.org/v2/...
js 根据url 下载图片
阿之阿佐
10-19 1万+
downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.cr...
js打印,设置页面边距
阿之阿佐
07-28 1万+
@page{ margin:0 }
vue利用v-for嵌套输出多层对象，分别输出到个表
阿之阿佐
03-18 9085
specifications:[ { specificationName:"颜色", specificationItem:[ {value:"黄色"}, {value:"黑色"} ] } ] class="table table-bordered table-hove
安卓自动填充短信验证码h5
05-20
安卓提供了自动填充短信验证码的功能，可以通过以下步骤来实现： 1. 在你的应用中的布局文件中加入以下代码： ```xml <EditText android:id="@+id/verification_code_edittext" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入验证码" /> ``` 2. 在你的Activity或Fragment中，添加以下代码： ```java private static final int SMS_CONSENT_REQUEST = 2; private void requestSMSPermission() { SmsManager smsManager = SmsManager.getDefault(); PendingIntent consentIntent = PendingIntent.getBroadcast(this, 0, new Intent("com.example.app.SMS_CONSENT"), 0); smsManager.requestSmsVerificationCode("555-1234", consentIntent); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == SMS_CONSENT_REQUEST) { if (resultCode == RESULT_OK) { String message = data.getStringExtra(SmsRetriever.EXTRA_SMS_MESSAGE); String verificationCode = extractVerificationCode(message); EditText verificationCodeEditText = findViewById(R.id.verification_code_edittext); verificationCodeEditText.setText(verificationCode); } else { // Handle error } } } private String extractVerificationCode(String message) { // Use regular expressions to extract verification code from message return ""; } ``` 3. 在AndroidManifest.xml文件中添加以下代码： ```xml <receiver android:name=".SmsBroadcastReceiver" android:exported="true" android:permission="android.permission.BROADCAST_SMS"> <intent-filter> <action android:name="com.google.android.gms.auth.api.phone.SMS_RETRIEVED" /> </intent-filter> </receiver> ``` 4. 创建SmsBroadcastReceiver类并添加以下代码： ```java public class SmsBroadcastReceiver extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent) { if (SmsRetriever.SMS_RETRIEVED_ACTION.equals(intent.getAction())) { Bundle extras = intent.getExtras(); Status status = (Status) extras.get(SmsRetriever.EXTRA_STATUS); switch(status.getStatusCode()) { case CommonStatusCodes.SUCCESS: String message = (String) extras.get(SmsRetriever.EXTRA_SMS_MESSAGE); // Handle the received message break; case CommonStatusCodes.TIMEOUT: // Handle timeout break; } } } } ``` 这样就可以在你的应用程序中实现自动填充短信验证码的功能了。当你的应用程序请求短信验证码时，用户将会收到一个弹窗让他们授权你的应用程序读取短信。如果用户同意了，你的应用程序将会自动填充短信验证码到指定的EditText中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值