Как правильно делать инпуты с описанием внутри ?

@Mailo · Регистрация: 18.02.2010

Студворк — интернет-сервис помощи студентам

Необходимо сделать инпут, в котором по умолчанию есть серый текст, который должен исчезнуть при клике на этот инпут. Заполнение инпута идёт уже чёрным и при повторном клике, всё что ввели не исчезает при очередном клике в области инпута, как если бы это была конструкция:

HTML5
1
<input onclick="value=''"  type="text"  value="Имя" />

@newJS · 21.09.2013, 07:08

это https://www.cyberforum.ru/html5/thread958565.html ?

@maximus2011 · 21.09.2013, 08:10

HTML5
1
<input type="text" placeholder="Name" />

цвет текста будет серый, а чтобы ввод был черным в стилях напишите

CSS
1
2
3
input{
color:#000;
}

@Mailo · 22.09.2013, 11:59 **[ТС]**

Хороший вариант, а как заставить этот placeholder работать на осле? Ещё бы с ie7+, открыл бы зоопарк.

Добавляя соли, первый найденный валидатором placeholder выдаёт ошибку.

@maximus2011 · 22.09.2013, 14:58

Вот вам под ишака начиная с 7

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
if($.browser.msie) { // Условие для вызова только в IE
        $("form").find("input[type='text'], textarea").each(function() {
            var tp = $(this).attr("placeholder");
            $(this).attr('value',tp).css({'color':'#1b2023'});
        }).focusin(function() {
            var val = $(this).attr('placeholder');
            if($(this).val() == val) {
                $(this).attr('value','').css('color','#1b2023');
            }
        }).focusout(function() {
            var val = $(this).attr('placeholder');
            if($(this).val() == "") {
                $(this).attr('value', val).css('color','#1b2023');
            }
        });
 
        /* Protected send form */
        $("form").submit(function() {
            $(this).find("input[type='text'], textarea").each(function() {
                var val = $(this).attr('placeholder');
                if($(this).val() == val) {
                    $(this).attr('value','');
                }
            })
        });
    }

ну а про валидатор, точно сказать не могу, да и не заморачиваюсь если честно ))) Но помоему он просто напросто еще не знает такого атрибута как placeholder ))

@Mailo · 22.09.2013, 19:55 **[ТС]**

Благодарю, работает, а как будет выглядеть код, если инпуты не в form находятся, я вот это вложение просто обычно опускаю? :

HTML5
1
2
3
4
5
<form id="login" method="post" action="#">
        <fieldset>
         code code code
        </fieldset>
</form>

@maximus2011 · 22.09.2013, 21:22

да не важно в чем они находятся, просто в скрипт подставляете вместо form имя родительского блока и все

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	21.09.2013, 07:08
	это https://www.cyberforum.ru/html5/thread958565.html ? 1

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	22.09.2013, 11:59 [ТС]
	Хороший вариант, а как заставить этот placeholder работать на осле? Ещё бы с ie7+, открыл бы зоопарк. Добавляя соли, первый найденный валидатором placeholder выдаёт ошибку. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	22.09.2013, 21:22
	да не важно в чем они находятся, просто в скрипт подставляете вместо form имя родительского блока и все 1