Калькуляторы и формы для сайтов
0 Пользователей и 1 Гость просматривают эту тему.
  • 25 Ответов
  • 17643 Просмотров
*

Ragivort

  • Живу я здесь
  • 1010
  • 49
  • Есть мечта-стоит жить
Всем привет, возможно ли сделать в RSForm маску ввода телефона вида +7 (ххх) xxx-xx-xx , что бы люди вводили туда цифры, а в поле вводилось само +7 (920) 343-32-44
Дозволь мне свершить то добро, которое я способен свершить, теперь, ибо я могу более не вернуться сюда.
*

Pazys

  • Практически профи
  • 1846
  • 237
  • <a>А где я ошибся-то?</b>
Re: Маска ввода для поля телефон
« Ответ #1 : 20.11.2013, 11:38:14 »
Есть плагин jquery - jquery.maskedinput.js

Потом пишете на странице:
Код: javascript
<script>
jQuery(function($){
   $("#phone").mask("(999) 999-99-99");
});
</script>

Ну и там любые маски можно сделать.

С RSForm не работал, но это решение универсальное.
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Ragivort

  • Живу я здесь
  • 1010
  • 49
  • Есть мечта-стоит жить
Re: Маска ввода для поля телефон
« Ответ #2 : 20.11.2013, 13:20:50 »
Спасибо, работает
Дозволь мне свершить то добро, которое я способен свершить, теперь, ибо я могу более не вернуться сюда.
*

Ragivort

  • Живу я здесь
  • 1010
  • 49
  • Есть мечта-стоит жить
Re: Маска ввода для поля телефон
« Ответ #3 : 21.11.2013, 15:47:57 »
А можно сделать так, чтобы в поле было значение по умолчанию? а то у меня стоит значение по умолчанию, а поле пустое, или чтобы эта маска была видна всегда, а не появлялась при нажатии на поле?
Дозволь мне свершить то добро, которое я способен свершить, теперь, ибо я могу более не вернуться сюда.
*

Pazys

  • Практически профи
  • 1846
  • 237
  • <a>А где я ошибся-то?</b>
Re: Маска ввода для поля телефон
« Ответ #4 : 21.11.2013, 17:22:44 »
В теге инпут прописать placeholder="+7 (999) 999-99-99"

Код: html4strict
<input ... placeholder="+7 (999) 999-99-99" />
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Ragivort

  • Живу я здесь
  • 1010
  • 49
  • Есть мечта-стоит жить
Re: Маска ввода для поля телефон
« Ответ #5 : 22.11.2013, 13:33:04 »
спасибо, работает
Дозволь мне свершить то добро, которое я способен свершить, теперь, ибо я могу более не вернуться сюда.
*

One

  • Давно я тут
  • 259
  • 2
Re: Маска ввода для поля телефон
« Ответ #6 : 21.01.2014, 20:07:47 »
Как сделать это в поле оформления заказа для VirtueMart 1.1.4?
Этот плагин jquery.maskedinput.js скачал. Какой файл редактировать дальше и что именно надо прописать?
*

Pazys

  • Практически профи
  • 1846
  • 237
  • <a>А где я ошибся-то?</b>
Re: Маска ввода для поля телефон
« Ответ #7 : 22.01.2014, 11:00:37 »
Ну там описание же есть. Прописываете саму маску для определенного поля (его класса или идентификатора):
Код: javascript
jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});
и например <input id="date" ...  - вот в нем уже заработает первая маска 99/99/9999

Ну естественно на странице должны быть подключены:
Код: html4strict
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
и потом вы должны подключить либо внешний файл:
Код: html4strict
<script src="mymask.js" type="text/javascript"></script>
либо прям в HTML прописать:
Код: html4strict
<script>
jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});
</script>
« Последнее редактирование: 22.01.2014, 11:04:24 от Pazys »
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

дрэю

  • Осваиваюсь на форуме
  • 40
  • 2
Re: Маска ввода для поля телефон
« Ответ #8 : 25.02.2014, 12:31:21 »
Огромная просьба, разжуйте для несведущих по порядку, что надо делать. Спасибо большое. Задача та же, в форме сделать маску № телефона.
*

Pazys

  • Практически профи
  • 1846
  • 237
  • <a>А где я ошибся-то?</b>
Re: Маска ввода для поля телефон
« Ответ #9 : 25.02.2014, 22:59:23 »
Вот тут подробно на забугорном.
Да и ответ №7 очень подробен.
Начните со слов "Ну естественно на странице должны быть подключены:" - и по-порядку.
На каком этапе у вас возникают вопросы?
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

дрэю

  • Осваиваюсь на форуме
  • 40
  • 2
Re: Маска ввода для поля телефон
« Ответ #10 : 08.03.2014, 15:56:21 »
Спасибо, всё получилось. Однако, меня терзают смутные сомненья. Подскажите пожалуйста, положить в корень Masked Input Plugin, правильное решение или нужно в конкретное место его отправить, или как-то по другому подгрузить лучше?
*

Pazys

  • Практически профи
  • 1846
  • 237
  • <a>А где я ошибся-то?</b>
Re: Маска ввода для поля телефон
« Ответ #11 : 08.03.2014, 21:56:49 »
Как угодно. Я обычно кладу в папку JS своего шаблона.
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

sanneo

  • Новичок
  • 1
  • 0
Re: Маска ввода для поля телефон
« Ответ #12 : 02.04.2014, 20:55:09 »
Еще вопрос.
Если по маске ввел часть данных, потом кликнул в другое место, то все введеное пропадает. Кто-то уже с этим разобрался?
*

dimon7772

  • Осваиваюсь на форуме
  • 53
  • 0
Re: Маска ввода для поля телефон
« Ответ #13 : 29.08.2014, 17:46:51 »
Я так и не понял как сделать. Описание выше, только для шибко умных, на пальцах нельзя?
*

Pazys

  • Практически профи
  • 1846
  • 237
  • <a>А где я ошибся-то?</b>
Re: Маска ввода для поля телефон
« Ответ #14 : 29.08.2014, 20:04:27 »
Дык я на пальцах и объяснил. Повторю вопрос: на каком этапе у вас возникают трудности?
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

JaneFaint

  • Осваиваюсь на форуме
  • 121
  • 3
Re: Маска ввода для поля телефон
« Ответ #15 : 29.08.2014, 22:12:47 »
Я так и не понял как сделать. Описание выше, только для шибко умных, на пальцах нельзя?

Качаете файл плагина из ссылки в посте выше, кидаете в папку templates->ваш шаблон->Js файл плагина.js и библиотеку jquery если таковой нет. В index.php подключаете библиотеку и плагин + вписываете скрипт с маской:
<script>
jQuery(function($){
   $("#phone").mask("(999) 999-99-99");
});
</script>
 
phone это id поля инпута телефона. Если в кратце то < input id="phone> <\input>
 И все. Должно получится.
*

DlMON

  • Осваиваюсь на форуме
  • 43
  • 1
Re: Маска ввода для поля телефон
« Ответ #16 : 16.03.2015, 12:06:46 »
<script>
jQuery(function($){
   $("#phone").mask("(999) 999-99-99");
});
</script>
 
phone это id поля инпута телефона. Если в кратце то < input id="phone> <\input>
 И все. Должно получится.
У меня в таком виде не работает.
Немного подправил код скрипта...
Код
<script type="text/javascript">
jQuery(document).ready(function() {
        jQuery("#phone").mask("(999) 999-9999");
        jQuery("#phoneExt").mask("(999) 999-9999? x99999");
        jQuery("#iphone").mask("+33 999 999 999");
});
</script>
Заработало! ;)
Вот ссылка для наглядности, что маска работает в RSForm
« Последнее редактирование: 16.03.2015, 12:31:00 от DlMON »
*

Leshiy

  • Осваиваюсь на форуме
  • 124
  • 7
Re: Маска ввода для поля телефон
« Ответ #17 : 04.09.2015, 20:26:08 »
Пара замечаний.
1. Т. к. некоторые пользователи указывают номер телефон с международным или межгородским кодом, то можно использовать один из нижеприведённых вариантов маски:
Код
<script>
jQuery(function($){
   $("#Phone").mask("8-(999)-999-99-99");
});
</script>
или
Код
<script>
jQuery(function($){
   $("#Phone").mask("+7-(999)-999-99-99");
});
</script>

2. Если на одной странице надо использовать скрипт два или раз, то надо либо прописать код скрипта на странице с другими id (например Phone2, Phone3 и т. д.) столько раз сколько скриптов надо на странице, либо использовать class, а не id:
Код
<script>
jQuery(function($){
   $(".Phone").mask("+7-(999)-999-99-99");
});
</script>
« Последнее редактирование: 04.09.2015, 21:19:11 от Leshiy »
*

Plosky

  • Осваиваюсь на форуме
  • 106
  • 2
Re: Маска ввода для поля телефон
« Ответ #18 : 27.04.2016, 17:18:43 »
файл скрипта скачал, кинул в папку "/templates/gk_yourshop/js/jquery.maskedinput.js

создал модуль - произвольный HTML code:
<script type="text/javascript" src="/templates/gk_yourshop/js/jquery.maskedinput.js" ></script>

<script>
jQuery(function($){
   $("#phone_1_field").mask("+7-(999)-999-99-99");
});
</script>

Не работает. Что сделал не так? Исходная страница: http://igubka.ru/cart

UPD. короче дело было в последней версии скрипта 1.4.1 с сайта разработчика, скачал старую версию 1.3.1, которую в основном все использовали и все заработало.
« Последнее редактирование: 28.04.2016, 09:18:23 от Plosky »
Некоторые программисты настолько ленивы, что сразу пишут рабочий код.
*

Plosky

  • Осваиваюсь на форуме
  • 106
  • 2
Re: Маска ввода для поля телефон
« Ответ #19 : 28.04.2016, 10:42:43 »
В теге инпут прописать placeholder="+7 (999) 999-99-99"

Код: html4strict
<input ... placeholder="+7 (999) 999-99-99" />
Как найти это поле в коде, в каком файле?
В шаблоне по этому пути не нашел: /public_html/templates/gk_yourshop/html/com_virtuemart/cart/


UPD. Решил проблему иначе, дописав в скрипте строку:    $("#phone_1_field").attr( "placeholder", "+7 (___)-___-__-__" )
« Последнее редактирование: 28.04.2016, 11:32:13 от Plosky »
Некоторые программисты настолько ленивы, что сразу пишут рабочий код.
*

Plosky

  • Осваиваюсь на форуме
  • 106
  • 2
Re: Маска ввода для поля телефон
« Ответ #20 : 28.04.2016, 11:38:44 »
Решил набросать самую простую инструкцию использования маски ввода телефона для самых недалеких:
Скрипт кидаем в папку шаблона, например: /templates/gk_yourshop/js/jquery.maskedinput.min.js

Создаем в Joomla модуль произвольного HTML кода:
<script type="text/javascript" src="/templates/gk_yourshop/js/jquery.maskedinput.min.js" ></script>
<script>
jQuery(function($){
   $("#phone_1_field").attr( "placeholder", "+7 (___)-___-__-__" )
   $("#phone_1_field").mask("+7 (999)-999-99-99");
});
</script>

Обычно jQuery уже прописан в системе, но если нет, то следует по такому же принципу прописать.
Некоторые программисты настолько ленивы, что сразу пишут рабочий код.
*

Kostya888

  • Захожу иногда
  • 13
  • 0
Re: Маска ввода для поля телефон
« Ответ #21 : 18.05.2016, 20:55:44 »
Подскажите, пожалуйста, как сделать у этой маски дополнительную фишку. Заключается эта фишка в том, чтобы телефон можно было вводить не откуда хочешь, а только с начала строки. Допустим, маска в инпуте такая +7 (___) ___-__-__ По умолчанию скрипт позволяет вводить цифры с любого положения. Например, после скобок или в другом месте, если поставить туда курсор. Это происходит так +7 (___) _45-_6-8_ Необходимо что-то прописать, чтобы при постановке курсора не в начало, он возвращался в начало строки автоматически и не позволял вводить цифры с неположенного места. Для чего это нужно? Экономит время посетителям сайта для повторного ввода телефона, если они его неправильно начали вводить. Очень актуально, когда заходят с мобильника.
*

Antonr45

  • Новичок
  • 6
  • 0
Re: Маска ввода для поля телефон
« Ответ #22 : 01.09.2016, 23:45:47 »
Добрый день!
Пробую эту маску на Андроиде 5, но она не работает именно в браузере данной прошивки.
Подскажите, может есть готовые костыли или другое решение данной проблемы?
*

hmr

  • Осваиваюсь на форуме
  • 28
  • 1
Re: Маска ввода для поля телефон
« Ответ #23 : 07.05.2017, 07:55:12 »
Доброго времени.
Присоединяюсь к предыдущему посту.
В стандартном браузере работает, а вот в UCBrowser страшно глючит, а это уже хуже.
Кто нибудь решал такое?
Пока смог только отключить для UCBrowser
*

vipiusss

  • Профи
  • 5605
  • 322
  • Круглая ава-зло!
Re: Маска ввода для поля телефон
« Ответ #24 : 07.05.2017, 08:08:38 »
Попробуйте точечные маски:
http://firstopinion.github.io/formatter.js/demos.html

Или универсальное, с флагами например и готовыми масками:
http://intl-tel-input.com

По обоим ссылкам демки и ссылки на гитхаб.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Liss

  • Давно я тут
  • 238
  • 9
Re: Маска ввода для поля телефон
« Ответ #25 : 09.06.2017, 16:08:06 »
Еще вопрос.
Если по маске ввел часть данных, потом кликнул в другое место, то все введеное пропадает. Кто-то уже с этим разобрался?
в инструкции же есть пример

Optionally, if you would like to disable the automatic discarding of the uncomplete input, you may pass an optional argument to the maskedinput method

Код: javascript
jQuery(function($){
   $("#product").mask("99/99/9999",{autoclear: false});
});
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как дублировать поля условий в RSForm?

Автор Anton shop

Ответов: 4
Просмотров: 1349
Последний ответ 09.02.2017, 12:44:42
от sanek2281
Как сделать поля disabled при автозаполнении?

Автор OXOJeck

Ответов: 4
Просмотров: 299
Последний ответ 24.11.2016, 16:19:33
от OXOJeck
Своя проверка данных поля RSForm

Автор yamenko

Ответов: 3
Просмотров: 634
Последний ответ 03.05.2016, 10:48:22
от vipiusss
Разьезжаются поля в RSForm

Автор den_master

Ответов: 0
Просмотров: 487
Последний ответ 26.02.2016, 10:04:08
от den_master
Скрытие / открытие поля по условию

Автор 68pin

Ответов: 1
Просмотров: 485
Последний ответ 09.12.2015, 10:55:09
от nikola_blin