Javascript 在移动设备上不起作用,但在桌面上适用于四个 otp 框的选项卡到下一个字段

Posted

技术标签:

【中文标题】Javascript 在移动设备上不起作用,但在桌面上适用于四个 otp 框的选项卡到下一个字段【英文标题】:Javascript not working on mobile but works on desktop for tab to next field for four otp box 【发布时间】:2019-09-24 06:28:57 【问题描述】:
let element = $event.srcElement.nextElementSibling;
element.focus()

这里下一个元素兄弟不起作用。

如果在框 1 中输入第一个数字,然后它会自动跳到下一个框,它在桌面浏览器中可以正常工作,但在移动浏览器中不能正常工作?

<input type="text" #otpvalue1 maxlength="1" [value]="otpValue1" (paste)="pasteEvent($event)" (keypress)="otpBox1($event)" (keydown)="handleBackSpaceBox1($event)"/>
                        <input type="text" #otpvalue2 maxlength="1" [value]="otpValue2" (paste)="pasteEvent($event)"  (keypress)="otpBox2($event)" (keydown)="handleBackSpaceBox2($event)">
                        <input type="text" #otpvalue3 maxlength="1" [value]="otpValue3" (paste)="pasteEvent($event)"  (keypress)="otpBox3($event)" (keydown)="handleBackSpaceBox3($event)">
                        <input type="text" #otpvalue4 maxlength="1" [value]="otpValue4" (paste)="pasteEvent($event)"  (keypress)="otpBox4($event)" (keydown)="handleBackSpaceBox4($event)" />

otpBox1(obj) 
    obj = (obj) ? obj : window.event;
    let charCode = (obj.which) ? obj.which : obj.keyCode;
    if ((charCode > 31 || charCode == 13) && (charCode < 48 || charCode > 57)) 
      return false;
    
    else 
      this.otpValue1 = obj.key;
      let otplength = this.otpValue1 + this.otpValue2 + this.otpValue3 + this.otpValue4;
      this.otplength = otplength.length;
      let element = obj.srcElement.nextElementSibling;
      if (element != null) 
        element.focus();
        obj.preventDefault();
      
      return true;
    
  


【问题讨论】:

【参考方案1】:

需要更多代码..您如何决定是否继续前进?许多事件在触摸设备和那些由插入的键盘和鼠标控制的设备之间是非常不同的!

【讨论】:

以上是关于Javascript 在移动设备上不起作用,但在桌面上适用于四个 otp 框的选项卡到下一个字段的主要内容,如果未能解决你的问题,请参考以下文章

滚动事件在移动设备上不起作用

加入()函数加载页面在移动设备上不起作用

切换在移动设备上不起作用

Wordpress Avada:Css 在移动设备上不起作用

工具栏的水平滚动在移动设备上不起作用

react-konva Text - onClick 在移动设备上不起作用