There is input to which the user enters a phone number:

 <input autofocus="autofocus" type="tel" name="phone" id="phone_number"/>

Used jQuery Masked Input Plugin Version: 1.4.1

input has a mask +7(___)___-__-__

 if (!$.browser.msie && !parseInt($.browser.version)<7) {$('#phone_number').mask("+7(999)999-99-99");}

If the user has moved the cursor in the middle of the mask, then it is difficult for him to enter a phone number (especially if he is watching the site on the smartphone).

For example, he accidentally moved the cursor +7(___)___-袣校袪小袨袪 __-__ Then, when he begins to enter a number, it will turn out to enter only 4 digits. +7(___)___-98-76 . And then you can not enter.

There are two different ideas:

  1. Somehow prohibit to put the cursor so that to the left of the cursor were empty (unfilled) characters. Then in the example above: If the user wants to put the cursor in the center +7(___)___-袣校袪小袨袪 __-__ then he automatically moves to the left: +7(袣校袪小袨袪 ___)___- __-__

  2. Somehow to implement: If the user has placed the cursor in the center +7(___)___-袣校袪小袨袪 __-__ and began to enter a phone number, then the input is as follows:

 +7(___)___-袣校袪小袨袪 __-__ +7(___)___-9_-__ +7(___)___-98-__ +7(___)___-98-7_ +7(___)___-98-76 +7(___)__9-87-65 +7(___)_98-76-54 +7(___)987-65-43 +7(__9)876-54-32 +7(_98)765-43-21 +7(987)654-32-10

How to implement these options?

  • one
    It seems the first option is better! - Stepan Kasyanenko
  • I am ready for both options. But I do not understand how to implement them. - Dima
  • An example of how to move the cursor jsfiddle.net/fwm2hdcx/1 - Dantessss

2 answers 2

jQuery, plugins, "dopilivaniya" plugins ... Native work for an hour:

 document.querySelectorAll('input.phone').forEach(function(item) { item.addEventListener('input', function() { fCurPosEnd(this); }); item.addEventListener('click', function() { fCurPosEnd(this); }); item.addEventListener('keyup', function() { fCurPosEnd(this); }); fCurPosEnd(item); }); function fCurPosEnd(el) { let sVal = el.value.replace(/\D+/gi, '').slice(1); sVal = sVal + '__________'.slice(sVal.length); let sNumb = sVal.match(/(.{3})(.{3})(.{2})(.{2})/); el.value = '+7(' + sNumb[1] + ')' + sNumb[2] + '-' + sNumb[3] + '-' + sNumb[4]; el.focus(); el.selectionStart = el.selectionEnd = (el.value.search(/[)-]*_/gi) < 0) ? el.value.length : el.value.search(/[)-]*_/gi); } 
 input.phone:invalid { background: #fdd; } input.phone:valid { background: #cfc; } 
 <input class="phone" type="text" pattern="[^_]*">

PS Did not check for cross-browser compatibility (Win7 + Chrome70 - "with a bang!")

  • It is impossible to place the cursor in an arbitrary place, if part of the data is entered. - Stepan Kasyanenko
  • @StepanKasyanenko what does it mean in an "arbitrary place"? Is the number from right to left dictated and written down? In the example, everything is logical - he started to dial, interrupted, continued from the place where he stopped. If you put in an arbitrary place, then the probability of making a mistake by placing the cursor "not there" is much higher than dialing numbers in order. - UModeL 4:27
  • Began to dial, dialed 8 digits. I saw that I was mistaken in 3 digits. And the cursor can not be put and changed. We'll have to erase everything, then re-type. Not very comfortable UX. - Stepan Kasyanenko
  • @StepanKasyanenko re-entry will make more careful to the set. And for the "amenities" you can not notice that it was also wrong in the fifth digit)) We are waiting for your decision on this issue ;-) - UModeL
  • Funny of course. We will forbid to change the text in the input that the user would carefully enter. I wish you that you would have done such an input on the CO when answering - you cannot change it, just erase it and re-enter it. This will improve the quality of the answers! You can make as an offer on MSE))) - Stepan Kasyanenko

I decided a little differently. If the user has not entered a single digit, then the cursor is firmly nailed to the first position. If you have already entered something, the cursor can be moved to edit something.

  $('#phone_number').click(function(){ if ($('#phone_number').val() == "+7(___)___-__-__") {$(this)[0].selectionStart = 3; $(this)[0].selectionEnd = 3;} });