HTML5. Кроссбраузерное Оформление Placeholder...
Здравствуйте.
HTML5 изучаю недавно и на днях решил применить атрибут 'placeholder'. (с соответствующим плагином для кроссбраузерности.) В результате столкнулся со следующими трудностями: 1) Opera не поддерживает регуляцию цвета для текста. 2) В Safary невозможно отцентрировать текст по горизонтали. Буду благодарен, если кто подскажет обходные пути. (Возможно требуется прописать что-нибудь в скрипте? Я в этом не силён.) P.S. Также было бы неплохо понять, каким образом можно найти аналог св-ва ':focus' для инпутов в ie-7? (необходимо поменять цвет бордерам.) Пример страницы с проблемами находиться здесь: http://webmaster.ayrveda.ru/Placeholder/index.html Буду признателен за любую помощь... |
|
Цитата:
(просто по фаербагу неотображается...) |
Mike_Kharkov,
Ну я про ограничения в Опере , "что ничего не поддерживаецо"... хотя нужно смотреть уже 12.02 вышла |
Цитата:
|
devote,
Я сижу на 11.52 - кроме текста ничо не вижу, потом я не утверждал - а констатирова про "нет" в Опере в статье ... :blink: и пыталсо поддержать спичь |
Цитата:
|
Вложений: 2
Цитата:
|
в 12-ой вообще ничерта толком не работает (12, 12.01, 12.02) - я не понимаю что Opera Software ASA год делали... Куча необъяснимых багов (порой не повторяемых даже на однотипных конфигурациях), косяки с флэшем и т.д. Надо бы уходить с неё потихоньку - уже два патча выпустили - а всё бестолку.
|
Nanto,
а конкретнее можете сказать что именно вас не устраивает? Косяк с флешем легко решается, просто в комплект 12-ой оперы зачем то сунули Flash 8-й версии из за этого часто видите предложение о его переустановке.. Решение: Зайдите в папку с плагинами оперы C:\Program Files\Opera\program\plugins найдите в ней файл NPSWF32.DLL и просто его удалите... Затем перезапустите оперу. И проблемы с флешем уйдут. |
Цитата:
|
Mike_Kharkov, все эти проблемы решит яваскрипт.
|
Цитата:
Тип: Публичная компания Девиз компании: «Лучший Интернет на любом устройстве» Год основания: 1995 Расположение: Осло, Норвегия Ключевые фигуры: Ларс Бойлсен, СЕО Йон Стефенсон фон Течнер, основатель Гейр Иварсёй, основатель Отрасль: Программное обеспечение Продукция: Opera Desktop Opera Mini Opera Mobile Nintendo DS Browser Internet Channel Opera Devices SDK Оборот: ▲ NOK 134.8 млн (3 кв. 2009) Операционная прибыль: ▲ NOK 47.4 млн (3 кв. 2009) Чистая прибыль: ▲ NOK 2.1 млн (3 кв. 2009) Число сотрудников: 760 (3 кв. 2009) Дочерние компании: FastMail, AdMarvel Сайт: opera.com |
Цитата:
(или что необходимо прописать в данном случае. Если это конечно для вас не трудно..) |
В Гугле забанили?
Вот, например, один из сотни способов: http://www.xiper.net/collect/html-an...-password.html |
Цитата:
(такое решение не приемлимо...) Под примером я подразумевал, что бы необходимый атрибут сохранялся... (Тоесть так, как это сделано в в данном плагине для IE-7,8,9...) P.S. Покажите мне где в гугле можно найти подобную(и главное нормально функционирующую) реализацию и для остальных браузеров? |
Цитата:
|
Цитата:
(месяцев 5 учил JS и JQ). Но затем забросил это дело. Во время практики возникает множество вопросов, ответы на которые нельзя получить на форумах.(так, как в данном топике например.) В любых видеоуроках(на русском) ответы на эти вопросы не получить... Остаються только буржуйские уроки.. Там действительно неплохо(по словам моих знакомых обьясняеться.) Но этот язык мне не доступен... Поэтому в свободное время и занимаюсь сейчас его изучением... (Других альтернатив пока не вижу. Если вы их видите - буду рад выслушать вашу точку зрения...) |
Цитата:
|
Цитата:
Что значит "необходимый атрибут сохранялся"??? Реализацию с "placeholder для нормальных браузеров, а для ослов - JS" Вы не найдёте. Как минимум по той причине, которую Вы сами в первом посте и озвучили. Opera не сможет его стилизовать, как минимум сменить foreground color. Поэтому я Вам и подыскал пример полностью на JS. Хотя можете поизвращаться - поопределять user-agent, и подсовывать Опере, IE (и, видимо, Safari) - js. Но это чревато... Я в таких случаях просто забиваю - прописываю placeholder - кто поддерживает, тот поддерживает, а остальное - проблемы малых народов! |
Цитата:
Но в вашем случае, насколько я понямаю, не наблюдаеться того, что пример работал в зависимости от того или иного браузера? Тоесть меня бы в данной ситуации устроило, что бы ваш пример работал для ie-7,8,9 + Opera и возможно Safary! А Mozilla и Сhrome(и в некоторых случаях+ safary) конечно будут по человечески функционировать.. Но вопрос в том, где мне найти подобную реализацию? (сам такое смастерить не смогу...) |
немного магии с CSS3 и малость JS:
Только для браузеров поддерживающие CSS3, хотя под IE дописать не проблема
<style type="text/css">
label {
position: relative;
}
label span {
position: absolute;
left: 0;
width: 100%;
top: 1px; /* управлять высотой подсказки */
/* Стиль для placeholder */
text-align: center;
color: #aeaeae;
font-size: 14px;
font-family: Tahoma;
}
label input:focus + span, label input:not([value=""]) + span {
display: none;
}
</style>
<!--[if lte IE 8]><style type="text/css">
/* В ИЕ ниже девятой версии просто не будет отображать подсказку */
label input + span {
display: none;
}
</style><![endif]-->
<label>
<input type="text" value="" onchange="this.setAttribute('value', this.value);" />
<span>Please enter name</span>
</label>
<label>
<input type="text" value="" onchange="this.setAttribute('value', this.value);" />
<span>Please enter email</span>
</label>
<label>
<input type="password" value="" onchange="this.setAttribute('value', this.value);" />
<span>Please enter password</span>
</label>
|
Цитата:
Но как я уже сказал это не совсем то что мне необходимо... (отсутствует 'placeholder'.) Как по мне проще выглядит то, что я сам когда то состряпал: http://webmaster.ayrveda.ru/Script_Form/index.html Меньше HTML кода. + это семантичнее... (но также отсутствует и 'placeholder'. Код возможно сделан далеко не наилучшим образом - но всё же это проще ИМХО.) |
Блин, я уже изрядно пьян... Так что не ждите отменя никакой конкретики! Вы 4 месяца изучали JS (или 6?..).
Тут на форуме куча скриптов - на определение юзер-агента. Возьмите любой за образец - и IE, Опере и Сафари - подсовывайте js-файл. А уж елси так необходимо "задействовать плюшки html5" - то Хрому и Фоксу подсовывайте цсс-ный placeholder. Повторюсь - я сейчас чересчур пьян. Но это сможет сделать и дебил. Надеюсь, Вы достаточно компетентны, чтобы справится с подобной задачей, в противном случае - извините, не по адресу. |
Цитата:
Скрипт отдельно на гитхабе: https://github.com/devote/HTML5-Placeholder
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://github.com/devote/HTML5-Placeholder/raw/master/placeholder.min.js"></script>
<script type="text/javascript">
function insertInput() {
var input = document.createElement('input');
input.type = "text";
input.setAttribute( 'placeholder', "Enter value" );
document.body.appendChild( input );
inputPlaceholder( input );
}
</script>
<style type="text/css">
input {
color: #f00;
text-align: center;
}
/*
* Стиль для браузеров не поддерживающих
* placeholder или псевдо-елемента input-placeholder
*/
input.input-placeholder, textarea.input-placeholder {
color: #00f;
text-align: center;
}
/*
* Стиль для WebKit браузера ( Chrome )
*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #00f;
text-align: center;
}
/*
* Стиль для Mozilla ( FireFox )
*/
input:-moz-placeholder, textarea:-moz-placeholder {
color: #00f;
text-align: center;
}
</style>
</head>
<body>
<input type="text" value="" placeholder="Enter name" />
<input type="text" value="" placeholder="Enter email" class="vasya" />
<input type="password" value="" placeholder="Enter password" class="petya" />
<textarea placeholder="Enter message"></textarea>
<button onclick="insertInput();">Insert new input</button>
</body>
</html>
|
да забыл написать, для динамически вставленных input'ов можно заюзать метод inputPlaceholder пример:
var inp = document.createElement( 'input' );
inp.type = "text";
inp.setAttribute('placeholder', "Введи что-то");
document.body.appendChild( inp );
inputPlaceholder( inp ); // активируем placeholder для вновь вставленного элемента
|
Цитата:
|
Исправил ошибку в коде
|
Цитата:
Правда на вскидку заметил, что в ie-7,8 после фокуса текст не исчезает и затем когда вводиться новый текст - он врезаеться в середину(сверху накладывается) старого... P.S. Даже не знаю как вас благодарить. Если все заработает будет здорово... Сейчас уже нет сил во всём разбираться(ночь работал). Как только проснусь - сразу займусь вашим плагином... :) Ещё раз Oгромное Спасибо! |
Цитата:
Цитата:
|
Цитата:
|
Допилил его, теперь во всех браузерах должно работать нормально, на текстовых полях и на поле password а так же на textarea
|
закинул скрипт на гитхаб: https://github.com/devote/HTML5-Placeholder
|
Цитата:
Вы вот не стали определять юзер-агента, и поэтому Ваш пример абсолютно не решает проблему топик-стартера - Opera понимает атрибут placeholder, но не меняет для него цвет. Для Оперы этот атрибут надо скрывать. P.S. Да и фокс чего-то подглючивает. |
Цитата:
UPD: Я определяю не наличие возможности placeholder а наличие возможности менять стиль посредством CSS псевдо-элемента, если эту возможность отсутствует, тогда обрабатываю скриптом, не зависимо от того понимает браузер сам placeholder или нет... Единственное исключение сделано для Сафари, так как он понимает и то и другое, но не может центровать текст в placeholder, поэтому для него отдельно было введено правило. |
Цитата:
Имею ввиду Opera и Safary. http://webmaster.ayrveda.ru/devote-H...e6e/index.html (или под этот атрибут он не расчитан?) |
Цитата:
|
Mike_Kharkov,
я исправил, затести сейчас |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:09. |