Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Маска телефона (https://javascript.ru/forum/dom-window/76632-maska-telefona.html)

Igorsrt 28.01.2019 12:17

Маска телефона
 
Здравствуйте!
На сайте установлен скрипт mask-input с форматом "+7 (999) 999-99-99", но клиенты все равно уперто вводят свою восьмерку в начало телефонного номера. Можно ли сделать, что бы эта "8" игнорировалась, если ее вставляют в начало номера?

Dilettante_Pro 28.01.2019 13:42

<input type="text">
<script>
  document.querySelector('input').oninput = function() {
     var str = this.value;
     if(str.indexOf('8') == 0) {
        str = str.replace('8','+7');
        this.value = str;
     } 
  }
</script>

Но вообще-то нужно смотреть ваш скрипт mask-input

Igorsrt 28.01.2019 13:56

вот так это выглядит:
<form class="form-send" data-yaid="zakaz_form">
			    <h2>Заказать звонок</h2>
			    <h3>Наш специалист свяжется с вами в ближайшее время</h3>
				<input type="text" name="name" placeholder="Ваше имя*" class="required">
				<input type="text" name="phone" placeholder="Ваш телефон*" class="required">
				<input type="submit" value="Заказать звонок" class="btn" return="" true;"="">
				<input type="hidden" name="form" value="Заказ звонка">
				<label style="display: block;font-size: 12px;text-align: center;margin: 20px 0;" class="accept">
				    <input type="checkbox" name="accept"> 
				    Нажимая на кнопку, вы даете <a target="_blank" href="/docs/policy.pdf">согласие</a> на обработку своих персональных данных
				</label>
			</form>


а скрипт стандартный https://drive.google.com/open?id=12a...fs9DxsoLHuOhUJ

Dilettante_Pro 28.01.2019 14:05

А где скрипт mask-input?

Igorsrt 28.01.2019 14:11

https://drive.google.com/open?id=12a...fs9DxsoLHuOhUJ
ну и сама маска:
// маска
	$("input[name=phone]").mask("+7 (999) 999-99-99");

Dilettante_Pro 28.01.2019 14:42

Не знаю, что у вас за плагин, но вот пример
<input type="text" name="phone" placeholder="Ваш телефон*" class="required">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src = "https://snipp.ru/uploads/files/jquery.maskedinput.min.js" ></script>

<script>
$("input[name=phone]").mask("+7 (999) 999-99-99");

</script>

Igorsrt 28.01.2019 15:40

я извиняюсь, а в чем суть?
я попросил помощи, что бы восьмерка не вводилась первой цифрой (если вдруг кто-то ее забьет в маску)?

Nexus 28.01.2019 15:46

Igorsrt, разрешите восьмерку вводить и не парьтесь, т.е.
$('.mask-phone').mask('+9 (999) 999-99-99');

Igorsrt 28.01.2019 15:54

Цитата:

Сообщение от Nexus (Сообщение 502839)
Igorsrt, разрешите восьмерку вводить и не парьтесь, т.е.
$('.mask-phone').mask('+9 (999) 999-99-99');

сорри, что-то я туплю сегодня... в чем здесь решение?
Проблема в том, что люди забивают номер "по привычке" вместе с восьмеркой и последняя цифра, соответственно не сохраняется (так как в маске всего 10 цифр) - перезванивать не понятно куда

Nexus 28.01.2019 16:08

Цитата:

Сообщение от Igorsrt
сорри, что-то я туплю сегодня... в чем здесь решение?

перед примером кода черным по белому написано, разве нет?

Dilettante_Pro 28.01.2019 16:36

Nexus,
$('.mask-phone').mask('+7 (999) 999-99-99');
- это из моего примера. (И работает.) У ТС ничего такого нет.

Igorsrt 28.01.2019 16:48

ваще не врубаюсь, что работает?
<input type="text" class="mask-phone form-control" placeholder="Номер телефона">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" >
/*
    jQuery Masked Input Plugin
    Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com)
    Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
    Version: 1.4.1
*/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++)if(j[a]&&C[a]===p(a))return;g.completed.call(B)}}function p(a){return g.placeholder.charAt(a<g.placeholder.length?a:0)}function q(a){for(;++a<n&&!j[a];);return a}function r(a){for(;--a>=0&&!j[a];);return a}function s(a,b){var c,d;if(!(0>a)){for(c=a,d=q(b);n>c;c++)if(j[c]){if(!(n>d&&j[c].test(C[d])))break;C[c]=C[d],C[d]=p(d),d=q(d)}z(),B.caret(Math.max(l,a))}}function t(a){var b,c,d,e;for(b=a,c=p(a);n>b;b++)if(j[b]){if(d=q(b),e=C[b],C[b]=c,!(n>d&&j[d].test(e)))break;c=e}}function u(){var a=B.val(),b=B.caret();if(o&&o.length&&o.length>a.length){for(A(!0);b.begin>0&&!j[b.begin-1];)b.begin--;if(0===b.begin)for(;b.begin<l&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}else{for(A(!0);b.begin<n&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}h()}function v(){A(),B.val()!=E&&B.change()}function w(a){if(!B.prop("readonly")){var b,c,e,f=a.which||a.keyCode;o=B.val(),8===f||46===f||d&&127===f?(b=B.caret(),c=b.begin,e=b.end,e-c===0&&(c=46!==f?r(c):e=q(c-1),e=46===f?q(e):e),y(c,e),s(c,e-1),a.preventDefault()):13===f?v.call(this,a):27===f&&(B.val(E),B.caret(0,A()),a.preventDefault())}}function x(b){if(!B.prop("readonly")){var c,d,e,g=b.which||b.keyCode,i=B.caret();if(!(b.ctrlKey||b.altKey||b.metaKey||32>g)&&g&&13!==g){if(i.end-i.begin!==0&&(y(i.begin,i.end),s(i.begin,i.end-1)),c=q(i.begin-1),n>c&&(d=String.fromCharCode(g),j[c].test(d))){if(t(c),C[c]=d,z(),e=q(c),f){var k=function(){a.proxy(a.fn.caret,B,e)()};setTimeout(k,0)}else B.caret(e);i.begin<=m&&h()}b.preventDefault()}}}function y(a,b){var c;for(c=a;b>c&&n>c;c++)j[c]&&(C[c]=p(c))}function z(){B.val(C.join(""))}function A(a){var b,c,d,e=B.val(),f=-1;for(b=0,d=0;n>b;b++)if(j[b]){for(C[b]=p(b);d++<e.length;)if(c=e.charAt(d-1),j[b].test(c)){C[b]=c,f=b;break}if(d>e.length){y(b+1,n);break}}else C[b]===e.charAt(d)&&d++,k>b&&(f=b);return a?z():k>f+1?g.autoclear||C.join("")===D?(B.val()&&B.val(""),y(0,n)):z():(z(),B.val(B.val().substring(0,f+1))),k?b:l}var B=a(this),C=a.map(c.split(""),function(a,b){return"?"!=a?i[a]?p(b):a:void 0}),D=C.join(""),E=B.val();B.data(a.mask.dataName,function(){return a.map(C,function(a,b){return j[b]&&a!=p(b)?a:null}).join("")}),B.one("unmask",function(){B.off(".mask").removeData(a.mask.dataName)}).on("focus.mask",function(){if(!B.prop("readonly")){clearTimeout(b);var a;E=B.val(),a=A(),b=setTimeout(function(){B.get(0)===document.activeElement&&(z(),a==c.replace("?","").length?B.caret(0,a):B.caret(a))},10)}}).on("blur.mask",v).on("keydown.mask",w).on("keypress.mask",x).on("input.mask paste.mask",function(){B.prop("readonly")||setTimeout(function(){var a=A(!0);B.caret(a),h()},0)}),e&&f&&B.off("input.mask").on("input.mask",u),A()})}})});</script>

<script>
$('.mask-phone').mask('+7 (999) 999-99-99');
</script>

Dilettante_Pro 28.01.2019 16:53

Igorsrt,
Переделал свой пример максимально ближе к вашему, только плагин другой.
Нажмите кнопку "Посмотреть" в пост 6.

С вашим плагином не работает - вот пример:
<input type="text" name="phone" placeholder="Ваш телефон*" class="required">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src = "https://drive.google.com/file/d/12ahi2rm9Qpn3CyxfRXfs9DxsoLHuOhUJ/view" ></script>

<script>
$("input[name=phone]").mask("+7 (999) 999-99-99");

</script>

Igorsrt 28.01.2019 17:06

да не работает, ни в примере 6, ни в последнем ((
или это я так туплю? :(

Nexus 28.01.2019 17:25

Dilettante_Pro, код, на самом деле, вообще не важен.
Суть моего предложения была в том, чтобы отказаться от "+7" и дать пользователю ввести любое начало, тем самым решив проблему с пропадающей последней цифрой.

Dilettante_Pro 28.01.2019 19:11

Цитата:

Сообщение от Igorsrt
да не работает, ни в примере 6

Странно.
У меня в примере пост 6 в разных браузерах, даже если вводить только восьмерки, получается

+7 (888) 888-88-88

Люди, у кого-нибудь не так?

Igorsrt 28.01.2019 20:37

Цитата:

Сообщение от Dilettante_Pro (Сообщение 502854)
Странно.
У меня в примере пост 6 в разных браузерах, даже если вводить только восьмерки, получается

+7 (888) 888-88-88

Люди, у кого-нибудь не так?

в примере 6 обычный masked input... желание же, что бы если человек вводит номер с восьмеркой, то восьмерка убиралась - т.е. я вбиваю 89621134567, а остается 9621234567 :)

Igorsrt 29.01.2019 10:07

Не поможете? :(


Часовой пояс GMT +3, время: 18:16.