On some mobile devices (sony), the input field with the card number loses focus.

$("#cardNumber").mask("9999 9999 9999 9999?999");

Because of this, it is necessary every time to change the layout from text input to digital (with each input).

On the Sony ZR, Android 5.1.1. when entering the card number digits are swapped

Can you even tell in which direction to look?

The search for an answer did not give results, but I do not exclude the possibility that I am not looking for it correctly.

A working example is here .

I would like to at least globally understand why this is happening and what influences it.

UPD 1.0

For fields, the maskedinput plugin is used.

This part of the code is responsible for the input in which input.caret() behaves incorrectly.

 function androidInputEvent() { var curVal = input.val(), pos = input.caret(); if (oldVal && oldVal.length && oldVal.length > curVal.length) { console.log(oldVal); for (checkVal(!0); pos.begin > 0 && !tests[pos.begin - 1]; ) pos.begin--; if (0 === pos.begin) for (;pos.begin < firstNonMaskPos && !tests[pos.begin]; ) pos.begin++; input.caret(pos.begin, pos.begin); } else { for (checkVal(!0); pos.begin < len && !tests[pos.begin]; ) pos.begin++; input.caret(pos.begin, pos.begin); } tryFireCompleted(); }

What could be the reason?

  • I don't know how this extension works on $ .mask (), but I suspect that it works like onkeyup or onchange. That is, each change checks for a new entry. If the input is correct, it substitutes the same value $ input.val (getVal). If this is true, then each time substituting a new value (even if correct), the carriage gets up where it follows (at the end, sort of). And the phone does not focus at all. Try to implement an input mask differently. For example, try pressing the home button in jsfiddle.net/higimo/etqtcvc6 when you write something. - higimo
  • how else? What is this way bad? - Marina Voronova
  • For example, in that it is not necessary to rewrite, the value of the input, if it is correct. And in general, it is better to check the correctness when they tried to send. - higimo
  • thanks for the comments, a little cleared up - Marina Voronova

1 answer 1

 <input type="number">

It may only be likely that not all browsers support