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