What could be causing my JavaScript function to work on a computer but not on a cellphone?

I need my input fields to automatically focus on the next element after a number is entered.

Here's my HTML:

          "<input id='num-1' class='inp-num' data-pos='0' type='text' maxlength='1' name='one' onkeypress='isInputNumber(event)' autofocus='autofocus'/>" +
          "<input id='num-2' class='inp-num' data-pos='1' type='text' maxlength='1' name='two' onkeypress='isInputNumber(event)'>" +
          "<input id='num-3' class='inp-num' data-pos='2' type='text' maxlength='1' name='three' onkeypress='isInputNumber(event)'>" +
          "<input id='num-4' class='inp-num' data-pos='3' type='text' maxlength='1' name='four' onkeypress='isInputNumber(event)'>" +

In my JavaScript, I have the following:

  $('.inp-num').on('keyup', function() {
    if ($(this).val()) {
       $(this).next().focus();
     }
  });

This code works as expected, but when I try it on my cellphone, it doesn't move to the next input field. Can someone help me with this issue?

Thank you!

Answer №1

Unfortunately, the input value in your cellphone browser was not successfully retrieved before the keyup event was triggered. Thus, the condition if ($(this).val()) evaluates to false at this moment. To rectify this issue, it is advisable to utilize a different event type (for instance, input).

To discover more information and experiment with code:

https://www.w3schools.com/jsref/event_onchange.asp

$('.inp-num').on('input', function() {
 if ($(this).val()) {
   $(this).next().focus();
 }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to achieve a seamless scrolling effect with jquery?

I'm attempting to create a smooth scroll effect using jQuery, and while I can technically achieve it, the movement feels clunky and awkward. JS: $(document).ready(function(){ $(this).bind('mousewheel', function(e){ if(e.origina ...

React - verifying properties

Here's a question that I've been pondering. In many situations, we find ourselves needing to check if props are undefined. But what about nested props? For example, let's say we have: this.props.data.income.data1.value.chartData and we wa ...

"Clicking on a link inside a div element using the onclick

Hey there! I'm having an issue with a div that contains a link with an onclick event (see the code snippet). Inside this div, there is another link that goes to a different page than the div itself. The code works perfectly fine in IE, Chrome, and Fir ...

Inject the content of a HTML element or div into another div

I am working on a project where I have a list of items ("li"). When one of these items is clicked, I want to dynamically load content from an external HTML page into a "div". Despite researching solutions on stackoverflow and attempting to implement them, ...

AngularJS tree grid component with customizable cell templates

I have been utilizing the tree-grid component in AngularJS from this link: Here is an example of it on Plunker: http://plnkr.co/edit/CQwY0sNh3jcLLc0vMP5D?p=preview In comparison to ng-grid, I am unable to define cellTemplate, but I do require the abilit ...

What is the way to access data from a form array in Angular?

I have a form array that takes input from the user. I need to read each element of the form array individually and insert it into a database using a web service. However, I am struggling to create a method to handle this. Here is my code for the form array ...

Press the Text and Alter Text with React

I'm having an issue with the onClick event using React hooks. My goal is to have the text change to a different one when the user clicks, and then revert back to the original text on another click. For example, clicking "Change First" should switch it ...

Issues with Android webviews causing poor rendering

I am currently developing an application using the ionic framework and integrating it into an Android app via a webview. Everything appears to be functioning properly, except when I deploy it onto my device, the rendering is not working correctly. Source: ...

Having trouble drawing over buttons in HTML5 Canvas?

window.addEventListener("load", () => { const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); const color = document.querySelector("#color"); const strokeWeight = document.querySelector("#strokeWeight"); ...

Is there a way to display the "back button" on a subview?

As a newcomer to Ionic, I am finding navigation to be the most challenging aspect. My app has two tabs - "Dashboard" and "Friends". When I click on the Dashboard tab, I want it to navigate to a subview called "subview_dash", without displaying the tabs in ...

What methods can I use to analyze the integrity of the data's structure?

Currently working on an API using NestJS and typeorm. I am in need of a way to verify the format of the data being returned to clients who make requests to it. For instance, when accessing the /players route, I expect the data to have a specific structure ...

AES encryption starts to deviate after 16 characters

Utilizing the AES algorithm, I am encrypting data on both my iPhone and Android applications before transmitting it to a .NET server. The encryption process works seamlessly on the iPhone (the .NET server decrypts it without any issues). However, when it ...

Error encountered during AJAX POST request: NETWORK_ERR code XMLHttpRequest Exception 101 was raised while using an Android device

Here is the ajax post code that I am using: $.ajax({ type: "POST", url: "http://sampleurl", data: { 'email':$('#email').val(), 'password':$('#password').val(), }, cache: false, ...

I am facing an issue with my ng-model where it is accepting duplicates even though that is not my intention

I'm currently working on a dropdown menu that allows multiple selections, utilizing ng-model, ng-options, and ng-change clauses. However, I've encountered an issue where duplicate objects are being pushed into the model. To solve this problem, I ...

Why is my Angular app displaying outdated data from Firebase when navigating between pages?

Currently, I am dealing with an Angular 9 application that is hosted on Firebase and utilizes Firestore for its data storage. There is a perplexing issue that I haven't been able to figure out completely despite simplifying the app extensively. I will ...

Is there a way for a component to render independently of App.vue?

I’m exploring the use of vue-cli for my app, and I'm curious if it's possible to utilize a component without relying on App.vue. In this scenario, the component is displayed in the html, but when I click the button labeled "click here", the tes ...

The SpotLight class in Three.js illuminating a dynamic JSON model

Attempting to understand the light classes in three.js has been a bit of a challenge for me. I've been experimenting with an example in three.js, trying to place a 3D mesh model on the screen and give it a simple rotating animation. Is there a way to ...

Using iteration and conditional statements to verify the data type of an array

I'm attempting to check the array for the same data types using a for loop and if conditionals. However, my code doesn't seem to be working as expected. Can someone please help me figure out why? Thank you in advance! function checkDataTypes( ...

Verify if the current carousel item is active and contains an attribute with a value of 1

I am currently utilizing the bootstrap carousel component: <div class="carousel-item slide" data-llp-is-question="0"></div> <div class="carousel-item slide" data-llp-is-question="0"></div> <div class="carousel-item slide" data-l ...

Iterating through a DataTable's JSON data and accessing elements by their array index

I have some JSON data structured as follows: [ {"name": "Sitepoint", "url": "http://sitepoint123.com", "editor": {"name": "John Doe", "phone": ["9191919", "1212121"], "email": []}}, {"name": "Flippa", "url": "http://flippa.com", "editor": {"na ...