вопрос
Всем привет!
Подскажите как прикрутить маску в поле для телефона в модуле UniForm, прибывал через плагин jQuery Masked Input не срабатывает. Может кто делал и знает как сделать подскажите!
Подскажите как прикрутить маску в поле для телефона в модуле UniForm, прибывал через плагин jQuery Masked Input не срабатывает. Может кто делал и знает как сделать подскажите!
Ответил: Valeron36
Доброго времени суток.
1. Заливаем себе в шаблон в вашу папку UniForm папка js, два файла js.
Первый: jquery.maskedinput.js
Второй: jquery.maskedinput.min.js
2. Заменяем строку отвечающую за ввод номера телефона в вашем файле /uniform/callback/form.tpl модуля на:
3. И в самый низ в это же файле /uniform/callback/form.tpl
добавьте:
1. Заливаем себе в шаблон в вашу папку UniForm папка js, два файла js.
Первый: jquery.maskedinput.js
!function(factory) {
"function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);
}(function($) {
var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua);
$.mask = {
definitions: {
"9": "[0-9]",
a: "[A-Za-z]",
"*": "[A-Za-z0-9]"
},
autoclear: !0,
dataName: "rawMaskFn",
placeholder: "_"
}, $.fn.extend({
caret: function(begin, end) {
var range;
if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin,
this.each(function() {
this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(),
range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin),
range.select());
})) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(),
begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length),
{
begin: begin,
end: end
});
},
unmask: function() {
return this.trigger("unmask");
},
mask: function(mask, settings) {
var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal;
if (!mask && this.length > 0) {
input = $(this[0]);
var fn = input.data($.mask.dataName);
return fn ? fn() : void 0;
}
return settings = $.extend({
autoclear: $.mask.autoclear,
placeholder: $.mask.placeholder,
completed: null
}, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length,
firstNonMaskPos = null, $.each(mask.split(""), function(i, c) {
"?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])),
null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null);
}), this.trigger("unmask").each(function() {
function tryFireCompleted() {
if (settings.completed) {
for (var i = firstNonMaskPos; lastRequiredNonMaskPos >= i; i++) if (tests[i] && buffer[i] === getPlaceholder(i)) return;
settings.completed.call(input);
}
}
function getPlaceholder(i) {
return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0);
}
function seekNext(pos) {
for (;++pos < len && !tests[pos]; ) ;
return pos;
}
function seekPrev(pos) {
for (;--pos >= 0 && !tests[pos]; ) ;
return pos;
}
function shiftL(begin, end) {
var i, j;
if (!(0 > begin)) {
for (i = begin, j = seekNext(end); len > i; i++) if (tests[i]) {
if (!(len > j && tests[i].test(buffer[j]))) break;
buffer[i] = buffer[j], buffer[j] = getPlaceholder(j), j = seekNext(j);
}
writeBuffer(), input.caret(Math.max(firstNonMaskPos, begin));
}
}
function shiftR(pos) {
var i, c, j, t;
for (i = pos, c = getPlaceholder(pos); len > i; i++) if (tests[i]) {
if (j = seekNext(i), t = buffer[i], buffer[i] = c, !(len > j && tests[j].test(t))) break;
c = t;
}
}
function androidInputEvent() {
var curVal = input.val(), pos = input.caret();
if (oldVal && oldVal.length && oldVal.length > curVal.length) {
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();
}
function blurEvent() {
checkVal(), input.val() != focusText && input.change();
}
function keydownEvent(e) {
if (!input.prop("readonly")) {
var pos, begin, end, k = e.which || e.keyCode;
oldVal = input.val(), 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(),
begin = pos.begin, end = pos.end, end - begin === 0 && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1),
end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1),
e.preventDefault()) : 13 === k ? blurEvent.call(this, e) : 27 === k && (input.val(focusText),
input.caret(0, checkVal()), e.preventDefault());
}
}
function keypressEvent(e) {
if (!input.prop("readonly")) {
var p, c, next, k = e.which || e.keyCode, pos = input.caret();
if (!(e.ctrlKey || e.altKey || e.metaKey || 32 > k) && k && 13 !== k) {
if (pos.end - pos.begin !== 0 && (clearBuffer(pos.begin, pos.end), shiftL(pos.begin, pos.end - 1)),
p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), tests[p].test(c))) {
if (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), android) {
var proxy = function() {
$.proxy($.fn.caret, input, next)();
};
setTimeout(proxy, 0);
} else input.caret(next);
pos.begin <= lastRequiredNonMaskPos && tryFireCompleted();
}
e.preventDefault();
}
}
}
function clearBuffer(start, end) {
var i;
for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i));
}
function writeBuffer() {
input.val(buffer.join(""));
}
function checkVal(allow) {
var i, c, pos, test = input.val(), lastMatch = -1;
for (i = 0, pos = 0; len > i; i++) if (tests[i]) {
for (buffer[i] = getPlaceholder(i); pos++ < test.length; ) if (c = test.charAt(pos - 1),
tests[i].test(c)) {
buffer[i] = c, lastMatch = i;
break;
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else buffer[i] === test.charAt(pos) && pos++, partialPosition > i && (lastMatch = i);
return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val() && input.val(""),
clearBuffer(0, len)) : writeBuffer() : (writeBuffer(), input.val(input.val().substring(0, lastMatch + 1))),
partialPosition ? i : firstNonMaskPos;
}
var input = $(this), buffer = $.map(mask.split(""), function(c, i) {
return "?" != c ? defs[c] ? getPlaceholder(i) : c : void 0;
}), defaultBuffer = buffer.join(""), focusText = input.val();
input.data($.mask.dataName, function() {
return $.map(buffer, function(c, i) {
return tests[i] && c != getPlaceholder(i) ? c : null;
}).join("");
}), input.one("unmask", function() {
input.off(".mask").removeData($.mask.dataName);
}).on("focus.mask", function() {
if (!input.prop("readonly")) {
clearTimeout(caretTimeoutId);
var pos;
focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() {
input.get(0) === document.activeElement && (writeBuffer(), pos == mask.replace("?", "").length ? input.caret(0, pos) : input.caret(pos));
}, 10);
}
}).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask paste.mask", function() {
input.prop("readonly") || setTimeout(function() {
var pos = checkVal(!0);
input.caret(pos), tryFireCompleted();
}, 0);
}), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent),
checkVal();
});
}
});
});Второй: jquery.maskedinput.min.js
!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()})}})}); 2. Заменяем строку отвечающую за ввод номера телефона в вашем файле /uniform/callback/form.tpl модуля на:
<input class="uf-input uf-input-first [uf_error_phone]uf-input-error[/uf_error_phone]" type="text" name="phone" id="phone" value="{uf_field_phone}">3. И в самый низ в это же файле /uniform/callback/form.tpl
добавьте:
<script>
$(function(){
$("#phone").mask("+7 (999) 999 - 9999");
});
</script>
