Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   HTML5. Кроссбраузерное Оформление Placeholder... (https://javascript.ru/forum/xhtml-html-css/31276-html5-krossbrauzernoe-oformlenie-placeholder.html)

Mike_Kharkov 03.09.2012 23:02

Цитата:

Сообщение от Nanto (Сообщение 202859)
Я в таких случаях просто забиваю - прописываю placeholder - кто поддерживает, тот поддерживает, а остальное - проблемы малых народов!

Я согласен.
Но в вашем случае, насколько я понямаю, не наблюдаеться того, что пример работал в зависимости от того или иного браузера?
Тоесть меня бы в данной ситуации устроило, что бы ваш пример работал для ie-7,8,9 + Opera и возможно Safary! А Mozilla и Сhrome(и в некоторых случаях+ safary) конечно будут по человечески функционировать..
Но вопрос в том, где мне найти подобную реализацию?
(сам такое смастерить не смогу...)

devote 04.09.2012 00:13

немного магии с 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>

Mike_Kharkov 04.09.2012 04:29

Цитата:

Сообщение от devote (Сообщение 202867)
немного магии с CSS3 и малость JS:

Только для браузеров поддерживающие CSS3, хотя под IE дописать не проблема

Спасибо за пример.(говорю искренне.)
Но как я уже сказал это не совсем то что мне необходимо...
(отсутствует 'placeholder'.)
Как по мне проще выглядит то, что я сам когда то состряпал:
http://webmaster.ayrveda.ru/Script_Form/index.html
Меньше HTML кода. + это семантичнее...
(но также отсутствует и 'placeholder'. Код возможно сделан далеко не наилучшим образом - но всё же это проще ИМХО.)

Nanto 04.09.2012 06:25

Блин, я уже изрядно пьян... Так что не ждите отменя никакой конкретики! Вы 4 месяца изучали JS (или 6?..).
Тут на форуме куча скриптов - на определение юзер-агента. Возьмите любой за образец - и IE, Опере и Сафари - подсовывайте js-файл. А уж елси так необходимо "задействовать плюшки html5" - то Хрому и Фоксу подсовывайте цсс-ный placeholder.
Повторюсь - я сейчас чересчур пьян. Но это сможет сделать и дебил.
Надеюсь, Вы достаточно компетентны, чтобы справится с подобной задачей, в противном случае - извините, не по адресу.

devote 04.09.2012 08:42

Цитата:

Сообщение от 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 08:48

да забыл написать, для динамически вставленных input'ов можно заюзать метод inputPlaceholder пример:
var inp = document.createElement( 'input' );
inp.type = "text";
inp.setAttribute('placeholder', "Введи что-то");
document.body.appendChild( inp );
inputPlaceholder( inp ); // активируем placeholder для вновь вставленного элемента

devote 04.09.2012 08:51

Цитата:

Сообщение от Nanto
Тут на форуме куча скриптов - на определение юзер-агента.

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

devote 04.09.2012 09:35

Исправил ошибку в коде

Mike_Kharkov 04.09.2012 09:40

Цитата:

Сообщение от devote (Сообщение 202897)
ну вот накатал по быстрому, скриптом обрабатывается только в тех браузерах где нет поддержки placeholder или криво обрабатываются стили. В данном скрипте есть один недостаток, я не стал его допиливать, но если нужно позже допилю. Недостаток в том что в ИЕ ниже 9-й версии нельзя у вставленного в DOM элемента input сменить атрибут type, поэтому поля с типом password в ИЕ8 и ниже не будут отображать placeholder:
[HTML run]<!DOCTYPE html>

Большое спасибо. Если сможете допилить - я подожду сколько необходимо(не вопрос.)
Правда на вскидку заметил, что в ie-7,8 после фокуса текст не исчезает и затем когда вводиться новый текст - он врезаеться в середину(сверху накладывается) старого...
P.S. Даже не знаю как вас благодарить. Если все заработает будет здорово... Сейчас уже нет сил во всём разбираться(ночь работал).
Как только проснусь - сразу займусь вашим плагином... :)
Ещё раз Oгромное Спасибо!

devote 04.09.2012 09:47

Цитата:

Сообщение от Mike_Kharkov
Правда на вскидку заметил, что в ie-7,8 после фокуса текст не исчезает и затем когда вводиться новый текст - он врезаеться в середину(сверху накладывается) старого...

хм... странно но у меня все гуд.. вы проверяли до исправления моей ошибки или после?

Цитата:

Сообщение от Mike_Kharkov
Если сможете допилить - я подожду сколько необходимо(не вопрос.)

хорошо допилю позже


Часовой пояс GMT +3, время: 18:51.