我使用的是Ionic React应用程序,对构建Ionic Reaction应用程序来说是全新的. 目前,我正在try 自动填充动态口令(一次性密码),通过在用户登录/注册期间获取OTP通过消息android/iOS的. 目前,动态口令在每次新注册/登录时都会通过Twilio's默认短信服务发送给用户.因此,当动态口令到达用户手中时,用户可以手动键入动态口令,也可以复制消息中的动态口令并将其粘贴到Web应用程序中. 因此,目前用户可以从消息中复制动态口令并粘贴(将触发handlePaste个功能),但

Issue what I'm facing

  • 当OTP到来时,手机键盘上的OTP建议不会在Android中显示,但在iOS中可以使用.
  • 当用户复制消息中的动态口令并返回到应用程序并单击输入字段时,网络键盘会显示复制的动态口令键盘.现在,如果用户点击该动态口令,则only the 1st field of the input field gets populated and the other fields are left blank (using 4 separate input fields)handlePaste功能不会被触发.
  • 我try 在粘贴功能中添加控制台/alert ,但没有记录任何内容.

SMS FORMAT

Your OTP is: 123456.

@domain.com #123456

Approaches tried so far :

handlePaste功能代码:

const length = 6;
const [activeInput, setActiveInput] = useState(0)
const [otpValues, setOTPValues] = useState(Array<string>(length).fill(''))


    const handleOnPaste = 
    (e: React.ClipboardEvent<HTMLInputElement>) => {
        e.preventDefault()
        const pastedData = e.clipboardData
            .getData('text/plain')
            .trim()
            .slice(0, length - activeInput)
            .split('')
        if (pastedData) {
            let nextFocusIndex = 0
            const updatedOTPValues = [...otpValues]
            updatedOTPValues.forEach((val, index) => {
                
                    console.log(pastedData)
                        nextFocusIndex = index
                    
                
            })
            setActiveInput(Math.min(nextFocusIndex + 1, length - 1))
        }
    }

在函数内部使用但不起作用的Navigator credentials个代码:

navigator.credentials.get({
  otp: { transport:['sms'] },
  signal: ac.signal
}).then((otp) => {
  console.log(otp)
  
}).catch((err) => {
  console.error(err);
});


如果有人能帮我一把,我将不胜感激:)

推荐答案

The Problem actually is with web browser of iOS/android phones. 在移动网络浏览器中,当从键盘剪贴板粘贴文本/数字时,onPaste功能never gets triggered.它看起来像这样.

AutoRead OTP from messages

简而言之,你的handlePaste函数never gets triggered和它里面的clipboardData never gets value,但是input 元素的onchange函数被触发了.

SOLUTION:

  1. 您可以做的是,在您的onChange函数中判断输入值.
  2. 判断value长度是否大于1.
  3. 如果大于1,则手动将数据添加到clipboardData.
  4. 然后调用handlePaste函数.

Code:

将此添加到您的onChange函数中.

const handleChange = (e) => {
  const val = e.target.value;

  if (!val) {
    e.preventDefault();
    return;
  }

  // add this condition to manually trigger the paste
  // function and manually send the value to clipboard

  else if (val.trim().length > 1) {
    e.clipboardData = {
      getData: () => val.trim(),
    };
    handleOnPaste(e);
  } else {

    // do any other required changes
  }
};


这将解决您的问题,OTP只有一次输入填写.

Javascript相关问答推荐

如何在 cypress 中使用静态嵌套循环

我的角模板订阅后不刷新'

用JS从平面文件构建树形 struct 的JSON

React.Development.js和未捕获的ReferenceError:未定义useState

如何将数据块添加到d3力有向图中?

扩展类型的联合被解析为基类型

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

将嵌套数组的元素乘以其深度,输出一个和

图表4-堆叠线和条形图之间的填充区域

按特定顺序将4个数组组合在一起,按ID分组

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态

rxjs在每次迭代后更新数组的可观察值

在范围数组中查找公共(包含)范围

Reaction路由v6.4+数据API:重试加载程序而不显示错误

CSS网格使页面自动滚动

此上下文在JavaScript中

当触发AJAX POST请求时,绕过对PHP生成的表的加载函数

V-如果使用数组[vue3]中的布尔结果

Svelte:数组内的值绑定不起作用

数据上嵌套的for循环返回TypeError:迭代器方法不可调用