Фильтр по:
  

Информационный текст в поле сообщения. Имитация placeholder

Как сделать... Тема только по сайтам в системе uCoz

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Как сделать... Тема только по сайтам в системе uCoz » Информационный текст в поле сообщения. Имитация placeholder (Текст в поле добавления сообщения для чата. JavaScript)
Информационный текст в поле сообщения. Имитация placeholder
Дата: Понедельник, 26.03.2012, 09:35 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 Привет! Для чата добавил скрипт, что бы в value текст добавлялся
Code
<script type="text/javascript">
document.getElementById('mchatMsgF').value='Сообщение появится после проверки модератором!';
</script>
Правильный хоть?:) Не могу понять как правильно добавить событие onclick чтобы при клике по полю этот текст исчезал, знаю что просто... помоги?

Сообщение отредактировал Komoff - Понедельник, 26.03.2012, 15:49
 
Дата: Понедельник, 26.03.2012, 16:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Komoff,
Quote (Komoff)
Правильный хоть?:) Не могу понять как правильно добавить событие onclick чтобы при клике по полю этот текст исчезал

Просто исчезал? С концами? Вот так:
Code
<script type="text/javascript">
$('#mchatMsgF').val('Сообщение появится после проверки модератором!').click(function(){
if(this.value=='Сообщение появится после проверки модератором!'){
  this.value='';
};
});
</script>

...

А чтобы потом снова появлялся, нужно запомнить значение.
Типа:
Code
<script type="text/javascript">
$('#mchatMsgF').val('Сообщение появится после проверки модератором!').click(function(){
if(!$(this).data('placeholder'))$(this).data('placeholder',this.value);
if(this.value==$(this).data('placeholder')){
  this.value='';
};
}).blur(function(){
  if(this.value==''){
   this.value=$(this).data('placeholder');
  };
});
</script>

...

☑ Пример всего этого, на всякий: placeholder
...

 
Дата: Понедельник, 26.03.2012, 18:30 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


 likbezz, спасибо! Поставил. А чем focus от click отличается? Я почему-то разницы не вижу...

 
Дата: Понедельник, 26.03.2012, 18:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Komoff,
Quote (Komoff)
А чем focus от click отличается? Я почему-то разницы не вижу...

Правой клавишей по полю кликни, фокус обработается а клик нет.
...

 
Дата: Понедельник, 26.03.2012, 18:31 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline
Quote (likbezz)
Правой клавишей по полю кликни, фокус обработается а клик нет.
Хех, вон оно че. cool

 
Дата: Понедельник, 13.01.2014, 08:27 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline


 Доброго времени суток всем!
С прошедшими праздниками, остался последний рубеж - Старый Новый Год smile

По делу, вроде как нашёл нужную тему по своему вопросу, что бы новую не создавать ...

Использовал в коде изначально required="" и placeholder=""
Сам по себе placeholder="" решил заменить на
Код
required="" id="tel" name="tel" onBlur="if(value==''){value='Телефон*'}" onFocus="if(value=='Телефон*'){value=''}" value="Телефон*"

- пример для поля телефона в форме, но при этом value="Телефон*" убил required=""
Как можно это поправить?
А то как то placeholder="" не очень нравиться ))), а без обязательности заполнения пользователем тоже не айс

Заранее респект за помощь!

Сообщение отредактировал Andrio - Понедельник, 13.01.2014, 08:28
 
Дата: Понедельник, 13.01.2014, 08:37 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Andrio,
Цитата Andrio, Пн, 13.01.2014, 08:27:50
С прошедшими праздниками, остался последний рубеж - Старый Новый Год

Аха) пасиб)
И тебя с наступающими)

Цитата Andrio, Пн, 13.01.2014, 08:27:50
Как можно это поправить?

Выбрать что-то одно - либо required либо заполнение value ..
Или юзать как и положено:
Код
<input id="tel" name="tel" required placeholder="Телефон" />

Или проверять заполнение скриптом.
..

 
Дата: Понедельник, 13.01.2014, 08:43 |
Лейтенант
Группа: Проверенные
Сообщений: 59
Награды: 0
Репутация: 0
Статус: Offline
Цитата likbezz, Пн, 13.01.2014, 08:37:43
Или проверять заполнение скриптом.

Можно пример, что за скрипт? ... сложный, большой?
По идее в форме 5 полей:
-4 инпута текстовых ( value="ФИО*", value="Телефон*", value="E-mail*", value="Количество: 1" )
- одно textarea ( но по нему, кстати, почему то не работает код вместо placeholder )

По идее надо как то проверить что бы заполненные данные не совпадали с value по умолчанию ...

Сообщение отредактировал Andrio - Понедельник, 13.01.2014, 08:46
 
Дата: Понедельник, 13.01.2014, 08:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Andrio,
Цитата Andrio, Пн, 13.01.2014, 08:43:31
Можно пример, что за скрипт?

Обычный цикл, проходящийся по текстовым импутам, проверяющий наличие атрибута required и неравенство value с каким-то дополнительным атрибутом или установленным значением.
Если равно - выдает предупреждение в любой приемлемой форме.
Например для поля телефон можно установить атрибут data-value="Телефон" - и если value == data-value - что должно быть по умолчанию - значит юзер ничего не ввел - выводим предупреждение, вываливаемся из цикла, возвращаем false.
Предупреждение может быть любым, начиная от красной рамочки вокруг инпута, до алерта с гневным текстом.

 
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Как сделать... Тема только по сайтам в системе uCoz » Информационный текст в поле сообщения. Имитация placeholder (Текст в поле добавления сообщения для чата. JavaScript)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия