Цитата:
Но в вашем случае, насколько я понямаю, не наблюдаеться того, что пример работал в зависимости от того или иного браузера? Тоесть меня бы в данной ситуации устроило, что бы ваш пример работал для 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громное Спасибо! |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 18:35. |