Форум русской поддержки Joomla!® CMS
04.12.2016, 03:54:01 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Маска ввода для поля телефон

 (Прочитано 14845 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Ragivort
Живу я здесь
******

Репутация: +48/-2
Offline Offline

Пол: Мужской
Сообщений: 1005


Есть мечта-стоит жить


« : 20.11.2013, 11:08:55 »

Всем привет, возможно ли сделать в RSForm маску ввода телефона вида +7 (ххх) xxx-xx-xx , что бы люди вводили туда цифры, а в поле вводилось само +7 (920) 343-32-44
Записан
Pazys
Практически профи
*******

Репутация: +241/-4
Offline Offline

Пол: Мужской
Сообщений: 1937


<a>А где я ошибся-то?</b>


« Ответ #1 : 20.11.2013, 11:38:14 »

Есть плагин jquery - jquery.maskedinput.js

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

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

С RSForm не работал, но это решение универсальное.
Записан
Ragivort
Живу я здесь
******

Репутация: +48/-2
Offline Offline

Пол: Мужской
Сообщений: 1005


Есть мечта-стоит жить


« Ответ #2 : 20.11.2013, 13:20:50 »

Спасибо, работает
Записан
Ragivort
Живу я здесь
******

Репутация: +48/-2
Offline Offline

Пол: Мужской
Сообщений: 1005


Есть мечта-стоит жить


« Ответ #3 : 21.11.2013, 15:47:57 »

А можно сделать так, чтобы в поле было значение по умолчанию? а то у меня стоит значение по умолчанию, а поле пустое, или чтобы эта маска была видна всегда, а не появлялась при нажатии на поле?
Записан
Pazys
Практически профи
*******

Репутация: +241/-4
Offline Offline

Пол: Мужской
Сообщений: 1937


<a>А где я ошибся-то?</b>


« Ответ #4 : 21.11.2013, 17:22:44 »

В теге инпут прописать placeholder="+7 (999) 999-99-99"

Код
<input ... placeholder="+7 (999) 999-99-99" />
Записан
Ragivort
Живу я здесь
******

Репутация: +48/-2
Offline Offline

Пол: Мужской
Сообщений: 1005


Есть мечта-стоит жить


« Ответ #5 : 22.11.2013, 13:33:04 »

спасибо, работает
Записан
One
Давно я тут
****

Репутация: +2/-0
Offline Offline

Сообщений: 238


« Ответ #6 : 21.01.2014, 20:07:47 »

Как сделать это в поле оформления заказа для VirtueMart 1.1.4?
Этот плагин jquery.maskedinput.js скачал. Какой файл редактировать дальше и что именно надо прописать?
Записан
Pazys
Практически профи
*******

Репутация: +241/-4
Offline Offline

Пол: Мужской
Сообщений: 1937


<a>А где я ошибся-то?</b>


« Ответ #7 : 22.01.2014, 11:00:37 »

Ну там описание же есть. Прописываете саму маску для определенного поля (его класса или идентификатора):
Код
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

Ну естественно на странице должны быть подключены:
Код
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
и потом вы должны подключить либо внешний файл:
Код
<script src="mymask.js" type="text/javascript"></script>
либо прям в HTML прописать:
Код
<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 » Записан
дрэю
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 40


« Ответ #8 : 25.02.2014, 12:31:21 »

Огромная просьба, разжуйте для несведущих по порядку, что надо делать. Спасибо большое. Задача та же, в форме сделать маску № телефона.
Записан
Pazys
Практически профи
*******

Репутация: +241/-4
Offline Offline

Пол: Мужской
Сообщений: 1937


<a>А где я ошибся-то?</b>


« Ответ #9 : 25.02.2014, 22:59:23 »

Вот тут подробно на забугорном.
Да и ответ №7 очень подробен.
Начните со слов "Ну естественно на странице должны быть подключены:" - и по-порядку.
На каком этапе у вас возникают вопросы?
Записан
дрэю
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 40


« Ответ #10 : 08.03.2014, 15:56:21 »

Спасибо, всё получилось. Однако, меня терзают смутные сомненья. Подскажите пожалуйста, положить в корень Masked Input Plugin, правильное решение или нужно в конкретное место его отправить, или как-то по другому подгрузить лучше?
Записан
Pazys
Практически профи
*******

Репутация: +241/-4
Offline Offline

Пол: Мужской
Сообщений: 1937


<a>А где я ошибся-то?</b>


« Ответ #11 : 08.03.2014, 21:56:49 »

Как угодно. Я обычно кладу в папку JS своего шаблона.
Записан
sanneo
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 1


« Ответ #12 : 02.04.2014, 20:55:09 »

Еще вопрос.
Если по маске ввел часть данных, потом кликнул в другое место, то все введеное пропадает. Кто-то уже с этим разобрался?
Записан
dimon7772
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 50



« Ответ #13 : 29.08.2014, 17:46:51 »

Я так и не понял как сделать. Описание выше, только для шибко умных, на пальцах нельзя?
Записан
Pazys
Практически профи
*******

Репутация: +241/-4
Offline Offline

Пол: Мужской
Сообщений: 1937


<a>А где я ошибся-то?</b>


« Ответ #14 : 29.08.2014, 20:04:27 »

Дык я на пальцах и объяснил. Повторю вопрос: на каком этапе у вас возникают трудности?
Записан
JaneFaint
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 106



« Ответ #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
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 43


« Ответ #16 : 16.03.2015, 13: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>
Заработало! Wink
Вот ссылка для наглядности, что маска работает в RSForm
« Последнее редактирование: 16.03.2015, 13:31:00 от DlMON » Записан
Leshiy
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Сообщений: 123


« Ответ #17 : 04.09.2015, 21: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, 22:19:11 от Leshiy » Записан
Plosky
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 110



« Ответ #18 : 27.04.2016, 18: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, 10:18:23 от Plosky » Записан
Plosky
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 110



« Ответ #19 : 28.04.2016, 11:42:43 »

В теге инпут прописать placeholder="+7 (999) 999-99-99"

Код
<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, 12:32:13 от Plosky » Записан
Plosky
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 110



« Ответ #20 : 28.04.2016, 12: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
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #21 : 18.05.2016, 21:55:44 »

Подскажите, пожалуйста, как сделать у этой маски дополнительную фишку. Заключается эта фишка в том, чтобы телефон можно было вводить не откуда хочешь, а только с начала строки. Допустим, маска в инпуте такая +7 (___) ___-__-__ По умолчанию скрипт позволяет вводить цифры с любого положения. Например, после скобок или в другом месте, если поставить туда курсор. Это происходит так +7 (___) _45-_6-8_ Необходимо что-то прописать, чтобы при постановке курсора не в начало, он возвращался в начало строки автоматически и не позволял вводить цифры с неположенного места. Для чего это нужно? Экономит время посетителям сайта для повторного ввода телефона, если они его неправильно начали вводить. Очень актуально, когда заходят с мобильника.
Записан
Antonr45
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 6


« Ответ #22 : 02.09.2016, 00:45:47 »

Добрый день!
Пробую эту маску на Андроиде 5, но она не работает именно в браузере данной прошивки.
Подскажите, может есть готовые костыли или другое решение данной проблемы?
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet