Ввод телефона по шаблону

topfly8 · 29 Апр 2014

кто-нибудь внедрял такую фишку, чтобы при добавлении объявления, номер заполнялся по шаблону (например, +7 (ххх) ххх-хх-хх)?
Как можно подобное реализовать?

djnavel · 29 Апр 2014

Маска ввода в полях формы на jQuery:
найти в интернете Masked input, подключить его, далее нужно создать маску, и передать в нее необходимые параметры:

Код:

<script type="text/javascript">
jQuery(function($) {
$("#ID").mask("8 (999) 999-99-99");
});
</script>

ID посмотрите в коде <input id="ID"....> - поле ввода номера телефона
В интернете полно информации по маскам, почитайте...

ricogrin · 6 Авг 2015

djnavel сказал(а):
Маска ввода в полях формы на jQuery:
найти в интернете Masked input, подключить его, далее нужно создать маску, и передать в нее необходимые параметры:

Код:

<script type="text/javascript"> jQuery(function($) { $("#ID").mask("8 (999) 999-99-99"); }); </script>

ID посмотрите в коде <input id="ID"....> - поле ввода номера телефона
В интернете полно информации по маскам, почитайте...

Подскажите, пожалуйста.

input id="s_phone_mobile" вызывается <?php UserForm::mobile_text() ; ?>
никак не найду, где изменить этот input id, чтобы добавить к нему class="mask"

вот кусок из oc-content/plugins/requiredreg/form.php

Код:

 <div class="control-group">
				<label class="control-label" for="phoneMobile"><?php _e('Cell phone', 'modern') ; ?></label>
				<div class="controls">
 
					<?php UserForm::mobile_text() ; ?>
				</div>
			</div>

centurion · 6 Авг 2015

Лучше выводить номер телефона в самом шаблоне, а дальше скрипт:

HTML:

<script type="text/javascript">
jQuery(function($) {
$("#ID").mask("8 (999) 999-99-99");
});
</script>

В шапку и делайте как в инструкции. Подключение номера телефона есть на форуме.

ricogrin · 6 Авг 2015

наверно, что-то делаю не так.
у меня установлен osclass 3.5.7
прочитал тему но там так же не нашел <input id=

попробовал так, перенес блок из requiredreg/form.php в шаблона user-register.php
получилось:

Код:

			<div class="control-group">
				<label class="control-label" for="name"><?php _e('Name', 'bender'); ?></label>
				<div class="controls">
					<?php UserForm::name_text(); ?>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="email"><?php _e('E-mail', 'bender'); ?></label>
				<div class="controls">
					<?php UserForm::email_text(); ?>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="password"><?php _e('Password', 'bender'); ?></label>
				<div class="controls">
					<?php UserForm::password_text(); ?>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="password-2"><?php _e('Repeat password', 'bender'); ?></label>
				<div class="controls">
					<?php UserForm::check_password_text(); ?>
					<p id="password-error" style="display:none;">
						<?php _e("Passwords don't match", 'bender'); ?>
					</p>
				</div>
			</div>
<div class="control-group">
				<label class="control-label" for="phoneMobile"><?php _e('Cell phone', 'bender') ; ?></label>
				<div class="controls">
 
					<?php UserForm::mobile_text() ; ?>
				</div>
			</div>

и добавил в bender/common/head.php

Код:

<script type="text/javascript">
jQuery(function($) {
$("s_phone_mobile").mask("8 (999) 999-99-99");
});
</script>

не забыл подключить <script src="/oc-content/themes/bender/js/jquery.maskedinput.js" type="text/javascript"></script>
но не работает..
что я делаю не так?

centurion · 6 Авг 2015

Дайте ссылку на ваш сайт.

ricogrin · 6 Авг 2015

не могу, он пока на denwer..

ricogrin · 6 Авг 2015

как здесь не могу сделать т.к. не понимаю где искать <input

через firebug вижу:

Код:

<div class="control-group">
				<label class="control-label" for="phoneMobile">Мобильный телефон</label>
				<div class="controls">
 
					<input id="s_phone_mobile" type="text" name="s_phone_mobile" value="">				</div>
			</div>

centurion · 6 Авг 2015

Вот исходный код:

HTML:

<body>
<script type="text/javascript">
$(function(){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#phoneext").mask("(999) 999-9999? x99999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
$("#product").mask("a*-999-a999");
$("#eyescript").mask("~9.99 ~9.99 999");
});
</script>
 
<table border="0">
<tbody>
<tr>
<td>Date</td>
<td><input id="date" type="text" tabindex="1"></td>
<td>99/99/9999</td>
</tr>
<tr>
<td>Phone</td>
<td><input id="phone" type="text" tabindex="3"></td>
<td>(999) 999-9999</td>
</tr>
<tr>
<td>Phone + Ext</td>
<td><input id="phoneext" type="text" tabindex="4"></td>
<td>(999) 999-9999? x99999</td>
</tr>
<tr>
<td>Tax ID</td>
<td><input id="tin" type="text" tabindex="5"></td>
<td>99-9999999</td>
</tr>
<tr>
<td>SSN</td>
<td><input id="ssn" type="text" tabindex="6"></td>
<td>999-99-9999</td>
</tr>
<tr>
<td>Product Key</td>
<td><input id="product" type="text" tabindex="7"></td>
<td>a*-999-a999</td>
</tr>
<tr>
<td>Eye Script</td>
<td><input id="eyescript" type="text" tabindex="8"></td>
<td>~9.99 ~9.99 999</td>
</tr>
</tbody>
</table>
</body>
</html>

В исходном коде попробуйте посмотреть какой у вас ID поля, я вижу "phoneMobile", попробуйте его прописать.

centurion · 6 Авг 2015

И джава скрипт в body пропишите, может не иницилизируется он в хедере.

ricogrin · 6 Авг 2015

спасибо, все работает! как увидел код сразу понял, что не поставил # в script

Dengol · 16 Сен 2015

Кажется все элементарно, но что-то не получается.
Вообще такое впечатление, что с js беда какая-то, вчера бился с табами на js так и не получилось реализовать хотя на других сайтах без проблем...

1) Подключил скрипт Masked input

Код:

<script src="/oc-content/themes/bender/js/mask.js" type="text/javascript"></script>

2) В head.php подключил

Код:

<script type="text/javascript">
jQuery(function($) {
$("#phoneNumber").mask("8 (999) 999-99-99");
});
</script>

В данном случае id для поля на странице объявления где форма обратной связи с автором - http://photobaraholka.ru/canon/obyektivyi_dlya_canon/canon-16-35-2-8-l-ii_i5
Но в целом хотел реализовать для формы публикации объявления там поле "Телефон" созданное через "Пользовательские поля" с id "meta_phonenumber" и появляется при выборе категории.
Буду благодарен, если кто-то ткнет в ошибку

centurion · 16 Сен 2015

Файрбаг такое выдал:

Код:

ReferenceError: jQuery is not defined
http://photobaraholka.ru/oc-content/themes/bender/js/mask.js
Line 8

Попробуйте использовать последнюю версию jQuery.

Dengol · 18 Сен 2015

centurion сказал(а):
Файрбаг такое выдал:

Код:

ReferenceError: jQuery is not defined http://photobaraholka.ru/oc-content/themes/bender/js/mask.js Line 8

Попробуйте использовать последнюю версию jQuery.

Спасибо за наводку.
Ошибку указанную вами выдавало из-за того, что скрипт маски был подключен выше jQuery.
Опустил jquery.maskedinput.js ниже всех скриптов, ошибка пропала.

Вызов тоже опустил на всякий случай вниз перед </body>

Код:

<script type="text/javascript">
jQuery(function($) {
$("#phoneNumber").mask("8 (999) 999-99-99");
});
</script>

На всякий случай обновил jQuery:

Код:

<script type="text/javascript" src="http://photobaraholka.ru/oc-includes/osclass/assets/js/jquery.min.js"></script>
 <script type="text/javascript" src="http://photobaraholka.ru/oc-includes/osclass/assets/js/jquery-ui.min.js"></script>

Не работает...

Dengol · 18 Сен 2015

Так, на странице объявления в форме обратной связи получилось.
Помогло обновление fancybox до последней версии: http://fancyapps.com/fancybox/

На странице публикации объявления что-то никак не хочет: http://photobaraholka.ru/item/new

Там поле телефона сделано через пользовательские поля и с id - meta_phonenumber
Вызов функции выглядит сейчас так:

Код:

<script type="text/javascript">
jQuery(function($) {
$("#phoneNumber").mask("8 (999) 999-99-99");
$("#meta_phonenumber").mask("8 (999) 999-99-99");
});
</script>

Первый для формы обратной связи на странице объявления, а второй для поля с телефоном на странице публикации объявления.

centurion · 18 Сен 2015

Проверьте результат Файрбагом, вы быстро ошибку найдете.

Ввод телефона по шаблону

topfly8

Пользователь

djnavel

Модератор

ricogrin

Новичок

centurion

Администратор

ricogrin

Новичок

centurion

Администратор

ricogrin

Новичок

ricogrin

Новичок

centurion

Администратор

centurion

Администратор

ricogrin

Новичок

Dengol

Новичок

centurion

Администратор

Dengol

Новичок

Dengol

Новичок

centurion

Администратор