03.09.2012, 23:02
|
 |
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
Сообщение от Nanto
|
|
Я в таких случаях просто забиваю - прописываю placeholder - кто поддерживает, тот поддерживает, а остальное - проблемы малых народов!
|
Я согласен.
Но в вашем случае, насколько я понямаю, не наблюдаеться того, что пример работал в зависимости от того или иного браузера?
Тоесть меня бы в данной ситуации устроило, что бы ваш пример работал для ie-7,8,9 + Opera и возможно Safary! А Mozilla и Сhrome(и в некоторых случаях+ safary) конечно будут по человечески функционировать..
Но вопрос в том, где мне найти подобную реализацию?
(сам такое смастерить не смогу...)
Последний раз редактировалось Mike_Kharkov, 03.09.2012 в 23:04.
|
|
04.09.2012, 00:13
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
немного магии с 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>
Последний раз редактировалось devote, 04.09.2012 в 00:26.
|
|
04.09.2012, 04:29
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
|
Сообщение от devote
|
немного магии с CSS3 и малость JS:
Только для браузеров поддерживающие CSS3, хотя под IE дописать не проблема
|
Спасибо за пример.(говорю искренне.)
Но как я уже сказал это не совсем то что мне необходимо...
(отсутствует 'placeholder'.)
Как по мне проще выглядит то, что я сам когда то состряпал:
http://webmaster.ayrveda.ru/Script_Form/index.html
Меньше HTML кода. + это семантичнее...
(но также отсутствует и 'placeholder'. Код возможно сделан далеко не наилучшим образом - но всё же это проще ИМХО.)
Последний раз редактировалось Mike_Kharkov, 04.09.2012 в 04:52.
|
|
04.09.2012, 06:25
|
|
Профессор
|
|
Регистрация: 21.12.2010
Сообщений: 243
|
|
|
Блин, я уже изрядно пьян... Так что не ждите отменя никакой конкретики! Вы 4 месяца изучали JS (или 6?..).
Тут на форуме куча скриптов - на определение юзер-агента. Возьмите любой за образец - и IE, Опере и Сафари - подсовывайте js-файл. А уж елси так необходимо "задействовать плюшки html5" - то Хрому и Фоксу подсовывайте цсс-ный placeholder.
Повторюсь - я сейчас чересчур пьян. Но это сможет сделать и дебил.
Надеюсь, Вы достаточно компетентны, чтобы справится с подобной задачей, в противном случае - извините, не по адресу.
|
|
04.09.2012, 08:42
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Mike_Kharkov
|
|
Спасибо за пример.(говорю искренне.)
|
ну вот накатал по быстрому, скриптом обрабатывается только в тех браузерах где нет поддержки 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>
Последний раз редактировалось devote, 04.09.2012 в 14:14.
|
|
04.09.2012, 08:48
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
да забыл написать, для динамически вставленных input'ов можно заюзать метод inputPlaceholder пример:
var inp = document.createElement( 'input' );
inp.type = "text";
inp.setAttribute('placeholder', "Введи что-то");
document.body.appendChild( inp );
inputPlaceholder( inp ); // активируем placeholder для вновь вставленного элемента
|
|
04.09.2012, 08:51
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Nanto
|
|
Тут на форуме куча скриптов - на определение юзер-агента.
|
забудь вообще про такие советы, делать что-то по юзер агенту плохой тон... Не нужно людей учить говнокодить. Нужно определять возможности браузера а не парсить агент. |
|
04.09.2012, 09:35
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Исправил ошибку в коде
|
|
04.09.2012, 09:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
|
Сообщение от devote
|
ну вот накатал по быстрому, скриптом обрабатывается только в тех браузерах где нет поддержки placeholder или криво обрабатываются стили. В данном скрипте есть один недостаток, я не стал его допиливать, но если нужно позже допилю. Недостаток в том что в ИЕ ниже 9-й версии нельзя у вставленного в DOM элемента input сменить атрибут type, поэтому поля с типом password в ИЕ8 и ниже не будут отображать placeholder:
[HTML run]<!DOCTYPE html>
|
Большое спасибо. Если сможете допилить - я подожду сколько необходимо(не вопрос.)
Правда на вскидку заметил, что в ie-7,8 после фокуса текст не исчезает и затем когда вводиться новый текст - он врезаеться в середину(сверху накладывается) старого...
P.S. Даже не знаю как вас благодарить. Если все заработает будет здорово... Сейчас уже нет сил во всём разбираться(ночь работал).
Как только проснусь - сразу займусь вашим плагином... 
Ещё раз Oгромное Спасибо! |
|
04.09.2012, 09:47
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Mike_Kharkov
|
|
Правда на вскидку заметил, что в ie-7,8 после фокуса текст не исчезает и затем когда вводиться новый текст - он врезаеться в середину(сверху накладывается) старого...
|
хм... странно но у меня все гуд.. вы проверяли до исправления моей ошибки или после?
|
Сообщение от Mike_Kharkov
|
|
Если сможете допилить - я подожду сколько необходимо(не вопрос.)
|
хорошо допилю позже |
|
|
|
