Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 51 Ответов
  • 27636 Просмотров
*

AndreN

  • Захожу иногда
  • 53
  • 1 / 0
Re: Маска ввода для поля телефон
« Ответ #30 : 20.09.2021, 17:33:43 »
Да, php, который отрежет лишние символы и отправит значение в скрытое поле, а его и отправим админу. Но в php не очень селен, поэтому и спрашиваю, может кто поделится готовым кодом.
*

sivers

  • Живу я здесь
  • 2465
  • 336 / 0
Re: Маска ввода для поля телефон
« Ответ #31 : 20.09.2021, 19:08:28 »
Вряд ли у кого-то найдется код вот под прям для вашей формы. Тут или ссылку приводить надо, чтоб с js-решением помогли, либо правку заказывать, если на php надо.
На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #32 : 08.10.2023, 13:11:06 »
Есть плагин jquery - jquery.maskedinput.js

Потом пишете на странице:
Код: javascript
<script>
jQuery(function($){
   $("#phone").mask("(999) 999-99-99");
});
</script>
Ну и там любые маски можно сделать.
С RSForm не работал, но это решение универсальное.
Подскажите пожалуйста как в четвертой Joomla подключить файл скрипта?
По простому, для тех кто на бронепоезде. Потому как читал статью про подключение через WebAssetRegistry.
Неосилил. В тройке было легко и просто. а тут как-то мудрено...
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #33 : 08.10.2023, 13:55:46 »
Потому как читал статью про подключение через WebAssetRegistry.
Неосилил. В тройке было легко и просто. а тут как-то мудрено...

На мой взгляд тоже перемудрили, в трех местах одно и тоже по сути писать
Как правильно подключать JavaScript и CSS в Joomla 4

Но вроде бы и старый метод тоже работает
Код
$document = JFactory::getDocument();
$document->addScript( JUri::root(). 'path/custom.js');
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #34 : 08.10.2023, 15:29:41 »
На мой взгляд тоже перемудрили, в трех местах одно и тоже по сути писать
Как правильно подключать JavaScript и CSS в Joomla 4
Я именно эту статью читал. Но я не спец, поэтому для меня вообще дебри. Я запутался. Либо там описаны несколько вариантов, либо нужно как-то в нескольких местах прописывать.
Но вроде бы и старый метод тоже работает
Код
$document = JFactory::getDocument();
$document->addScript( JUri::root(). 'path/custom.js');
Это прописывать как в третьей Joomla, в индексном файле между тегами  <head> ?
И писать относительный путь, относительно шаблона.
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #35 : 08.10.2023, 16:05:03 »
Это прописывать как в третьей Joomla, в индексном файле между тегами  <head> ?
И писать относительный путь, относительно шаблона.

Можно и до head, сверху где всякие переменные обычно определяются. Скрипт упадет в конец страницы до закрытия body.
Ну и да, путь относительно корня сайта нужен.

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #36 : 08.10.2023, 17:59:01 »
Прописал в индексном файле. Файл подключился.
Но у меня задача немного отличается от темы. Форма выводится через SP Page Builder. Аддон контактная форма.
Вот туда и хочу сделать маску на телефон. Файл вывода формы нашел, но при попытке добавить скрипт получается ошибка. Неправильно делаю. Я не совсем понимаю как на страницу добавить
Код
<script>
jQuery(function($){
   $("#phone").mask("(999) 999-99-99");
});
</script>
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #37 : 08.10.2023, 19:07:43 »
Посмотрите какой класс у инпута поля телефона в выводимой форме и его пропишите в инициализации скрипта
$(".someInputClass").mask("(999) 999-99-99");

И не забываем, что подключение скрипта с функцией должно быть выше чем кастомный JS с инициализацией. К счастью с билдерами не работаю, но возможно там есть опция подключения своего JS где-то в настройках.
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Vastriet

  • Захожу иногда
  • 254
  • 6 / 0
Re: Маска ввода для поля телефон
« Ответ #38 : 08.10.2023, 20:35:29 »
в билдере есть кастом для каждой страницы
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #39 : 08.10.2023, 21:01:17 »
в билдере есть кастом для каждой страницы
Там только  CSS
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #40 : 08.10.2023, 21:07:24 »
Сделайте проще - запихните запуск скрипта в сам файл функции (которую подключили) в конце и всё
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Vastriet

  • Захожу иногда
  • 254
  • 6 / 0
Re: Маска ввода для поля телефон
« Ответ #41 : 08.10.2023, 21:52:55 »
Там только  CSS
и js тоже.
если про конечно
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #42 : 09.10.2023, 09:19:12 »
Сделайте проще - запихните запуск скрипта в сам файл функции (которую подключили) в конце и всё
Тоже были подобные мысли. Только я подумывал запихнуть в какой-нибудь Джумловский  скрипт, который уже подключен.
Спасибо. попробую так.
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #43 : 09.10.2023, 09:24:53 »
и js тоже.
если про конечно
У меня  Про версии 5.1.3.
 Покажите где можно добавить JS? Очень интересно.
На сайте в документации пишут
Цитировать
Can I use custom JavaScript code inside SP Page Builder? In general, the answer is No. There is no custom JS addon yet. Also, we do not recommend using RAW HTML addon for such code, it wasn't developed for JavaScript (!).

You have to install an extra module (extension) that allows you to put custom JavaScript inside. For the first try, we suggest adding & test this method from the back end, with database backup done.
*

Vastriet

  • Захожу иногда
  • 254
  • 6 / 0
Re: Маска ввода для поля телефон
« Ответ #44 : 09.10.2023, 10:21:43 »
хм....согласен
убрали фишку
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #45 : 09.10.2023, 11:22:49 »
Сделайте проще - запихните запуск скрипта в сам файл функции (которую подключили) в конце и всё
Так и не получилось у меня.  :(
Возможно я неправильно добавляю. если будет возможность гляните пожалуйста, как правильно добавить.
Это сам скрипт.
Код
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

var ua = navigator.userAgent,
iPhone = /iphone/i.test(ua),
chrome = /chrome/i.test(ua),
android = /android/i.test(ua),
caretTimeoutId;

$.mask = {
//Predefined character definitions
definitions: {
'9': "[0-9]",
'a': "[A-Za-z]",
'*': "[A-Za-z0-9]"
},
autoclear: true,
dataName: "rawMaskFn",
placeholder: '_'
};

$.fn.extend({
//Helper Function for Caret positioning
caret: function(begin, end) {
var range;

if (this.length === 0 || this.is(":hidden") || this.get(0)!== document.activeElement) {
return;
}

if (typeof begin == 'number') {
end = (typeof end === 'number')? end : begin;
return this.each(function() {
if (this.setSelectionRange) {
this.setSelectionRange(begin, end);
} else if (this.createTextRange) {
range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
});
} else {
if (this[0].setSelectionRange) {
begin = this[0].selectionStart;
end = this[0].selectionEnd;
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return { 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():undefined;
}

settings = $.extend({
autoclear: $.mask.autoclear,
placeholder: $.mask.placeholder, // Load default placeholder
completed: null
}, settings);


defs = $.mask.definitions;
tests = [];
partialPosition = len = mask.length;
firstNonMaskPos = null;

mask = String(mask);

$.each(mask.split(""), function(i, c) {
if (c == '?') {
len--;
partialPosition = i;
} else if (defs[c]) {
tests.push(new RegExp(defs[c]));
if (firstNonMaskPos === null) {
firstNonMaskPos = tests.length - 1;
}
                if(i < partialPosition){
                    lastRequiredNonMaskPos = tests.length - 1;
                }
} else {
tests.push(null);
}
});

return this.trigger("unmask").each(function() {
var input = $(this),
buffer = $.map(
    mask.split(""),
    function(c, i) {
    if (c != '?') {
    return defs[c] ? getPlaceholder(i) : c;
    }
    }),
defaultBuffer = buffer.join(''),
focusText = input.val();

            function tryFireCompleted(){
                if (!settings.completed) {
                    return;
                }

                for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
                    if (tests[i] && buffer[i] === getPlaceholder(i)) {
                        return;
                    }
                }
                settings.completed.call(input);
            }

            function getPlaceholder(i){
                if(i < settings.placeholder.length)
                    return settings.placeholder.charAt(i);
                return settings.placeholder.charAt(0);
            }

function seekNext(pos) {
while (++pos < len && !tests[pos]);
return pos;
}

function seekPrev(pos) {
while (--pos >= 0 && !tests[pos]);
return pos;
}

function shiftL(begin,end) {
var i,
j;

if (begin<0) {
return;
}

for (i = begin, j = seekNext(end); i < len; i++) {
if (tests[i]) {
if (j < len && tests[i].test(buffer[j])) {
buffer[i] = buffer[j];
buffer[j] = getPlaceholder(j);
} else {
break;
}

j = seekNext(j);
}
}
writeBuffer();
input.caret(Math.max(firstNonMaskPos, begin));
}

function shiftR(pos) {
var i,
c,
j,
t;

for (i = pos, c = getPlaceholder(pos); i < len; i++) {
if (tests[i]) {
j = seekNext(i);
t = buffer[i];
buffer[i] = c;
if (j < len && tests[j].test(t)) {
c = t;
} else {
break;
}
}
}
}

function androidInputEvent(e) {
var curVal = input.val();
var pos = input.caret();
if (oldVal && oldVal.length && oldVal.length > curVal.length ) {
// a deletion or backspace happened
checkVal(true);
while (pos.begin > 0 && !tests[pos.begin-1])
pos.begin--;
if (pos.begin === 0)
{
while (pos.begin < firstNonMaskPos && !tests[pos.begin])
pos.begin++;
}
input.caret(pos.begin,pos.begin);
} else {
var pos2 = checkVal(true);
var lastEnteredValue = curVal.charAt(pos.begin);
if (pos.begin < len){
if(!tests[pos.begin]){
pos.begin++;
if(tests[pos.begin].test(lastEnteredValue)){
pos.begin++;
}
}else{
if(tests[pos.begin].test(lastEnteredValue)){
pos.begin++;
}
}
}
input.caret(pos.begin,pos.begin);
}
tryFireCompleted();
}


function blurEvent(e) {
                checkVal();

                if (input.val()!= focusText)
                    input.change();
            }

function keydownEvent(e) {
                if (input.prop("readonly")){
                    return;
                }

var k = e.which || e.keyCode,
pos,
begin,
end;
                    oldVal = input.val();
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || (iPhone && k === 127)) {
pos = input.caret();
begin = pos.begin;
end = pos.end;

if (end - begin === 0) {
begin=k!==46?seekPrev(begin):(end=seekNext(begin-1));
end=k===46?seekNext(end):end;
}
clearBuffer(begin, end);
shiftL(begin, end - 1);

e.preventDefault();
} else if( k === 13 ) { // enter
blurEvent.call(this, e);
} else if (k === 27) { // escape
input.val(focusText);
input.caret(0, checkVal());
e.preventDefault();
}
}

function keypressEvent(e) {
                if (input.prop("readonly")){
                    return;
                }

var k = e.which || e.keyCode,
pos = input.caret(),
p,
c,
next;

if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
return;
} else if ( k && k !== 13 ) {
if (pos.end - pos.begin !== 0){
clearBuffer(pos.begin, pos.end);
shiftL(pos.begin, pos.end-1);
}

p = seekNext(pos.begin - 1);
if (p < len) {
c = String.fromCharCode(k);
if (tests[p].test(c)) {
shiftR(p);

buffer[p] = c;
writeBuffer();
next = seekNext(p);

if(android){
//Path for CSP Violation on Firefox OS 1.1
var proxy = function() {
$.proxy($.fn.caret,input,next)();
};

setTimeout(proxy,0);
}else{
input.caret(next);
}
                            if(pos.begin <= lastRequiredNonMaskPos){
                         tryFireCompleted();
                             }
}
}
e.preventDefault();
}
}

function clearBuffer(start, end) {
var i;
for (i = start; i < end && i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
}
}
}

function writeBuffer() { input.val(buffer.join('')); }

function checkVal(allow) {
//try to place characters where they belong
var test = input.val(),
lastMatch = -1,
i,
c,
pos;

for (i = 0, pos = 0; i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (tests[i].test(c)) {
buffer[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else {
                        if (buffer[i] === test.charAt(pos)) {
                            pos++;
                        }
                        if( i < partialPosition){
                            lastMatch = i;
                        }
}
}
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
if (settings.autoclear || buffer.join('') === defaultBuffer) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if(input.val()) input.val("");
clearBuffer(0, len);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
input.val(input.val().substring(0, lastMatch + 1));
}
return (partialPosition ? i : firstNonMaskPos);
}

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")){
                        return;
                    }

clearTimeout(caretTimeoutId);
var pos;

focusText = input.val();

pos = checkVal();

caretTimeoutId = setTimeout(function(){
                        if(input.get(0)!== document.activeElement){
                            return;
                        }
writeBuffer();
if (pos == mask.replace("?","").length) {
input.caret(0, pos);
} else {
input.caret(pos);
}
}, 10);
})
.on("blur.mask", blurEvent)
.on("keydown.mask", keydownEvent)
.on("keypress.mask", keypressEvent)
.on("input.mask paste.mask", function() {
                    if (input.prop("readonly")){
                        return;
                    }

setTimeout(function() {
var pos=checkVal(true);
input.caret(pos);
                        tryFireCompleted();
}, 0);
});
                if (chrome && android)
                {
                    input
                        .off('input.mask')
                        .on('input.mask', androidInputEvent);
                }
checkVal(); //Perform initial check for existing values
});
}
});
}));
(function($){
   $("#phone").mask("+999)999-99-99");
});
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #46 : 09.10.2023, 12:49:23 »
Надо смотреть на живом примере.
Навскидку - #phone - это точно правильный идентификатор поля с телефоном в форме?
И у вас там либо jQuery либо $ потерялось перед function в конце

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #47 : 09.10.2023, 14:40:17 »
Надо смотреть на живом примере.
Навскидку - #phone - это точно правильный идентификатор поля с телефоном в форме?
И у вас там либо jQuery либо $ потерялось перед function в конце
Айдишник я уже добавил к полю телефона.
Код
if (!empty($show_phone)) {
$output .= '<div class="sppb-form-group ' . $phone_input_col . '">';
if ($show_label) {
$output .= '<label for="phone">' . Text::_('COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_PHONE'). '</label>';
}
$output .= '<input type="text" id="phone" name="phone" class="sppb-form-control" placeholder="' . Text::_('COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_PHONE'). '" required="required">';
$output .= '</div>';
}
jQuery либо $ потерялось перед function, это я уже экпериментировал, потому как не срабатывало ни так, ни так.
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #48 : 09.10.2023, 14:48:09 »
А в консоли что за ошибку пишет?
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #49 : 09.10.2023, 15:25:58 »
либо jQuery либо $
Ошибку видимо была при других обстоятельствах. Когда пишу либо jQuery либо $, ничего не происходит.
В смысле маска не срабатывает. Если всё правильно, то терзают меня смутные сомнения, что Page Builder не срабатывает.
Ведь, напомню, форма выводится через его аддон. Печально.  :(
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Маска ввода для поля телефон
« Ответ #50 : 09.10.2023, 18:12:05 »
Должно всё работать. Был бы сайт в сети - можно сразу понять в чем затык. Как обычно мелочь какая-нибудь.
Сам скрипт в исходном коде подключился после Jquery? В консоли какую ошибку пишет?
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Akeksandr

  • Захожу иногда
  • 390
  • 10 / 0
Re: Маска ввода для поля телефон
« Ответ #51 : 10.10.2023, 10:29:19 »
Сделайте проще - запихните запуск скрипта в сам файл функции (которую подключили) в конце и всё
Большое спасибо за помощь. Всё работает. Так и сделал. В конце добавил.
Просто изначально неправильно подключение скрипта прописал в индексном файле.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться