Изменение стиля поля по наличию содержимого

@Oktu · Регистрация: 15.08.2012

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

Добрый день.

Подскажите как решить задачу:

Есть поле

HTML5
1
<input>

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

Интуитивно чувствую, что это нужно решать через jQuery. Помогоите пожалуйста.

@BANO · 07.06.2016, 00:14

всё запросто делается и без всяких там jQuery

HTML5
1
<input type="text" pattern="^$" id="TEST">

CSS
1
2
3
#TEST:valid {
    border: solid red;
}

@Oktu · 07.06.2016, 19:46 **[ТС]**

Спасибо. Большое. То что нужно. Сделал так:

CSS
1
#empty:valid {border: 1px solid #ff0000;}

Добавлено через 5 минут
Интересный нюанс: при вводе определенных чисел в поле красная обводка пропадает, а при других остается, т.е. корректно работать не хочет, может это связано с тем, что

HTML5
1
type="number"

???

Добавлено через 7 минут
Вообще мистика какая -то, при определенных числах исчезает, а при других остается рамка.... разные варианты пробывал, а обязательно нужно добавлять pattern="^$"?

@BANO · 07.06.2016, 19:46

скорее всего именно с этим связано

@Oktu · 07.06.2016, 19:47 **[ТС]**

Добавил, не помоголо, осталось как было

@BANO · 07.06.2016, 19:50

ну тогда придётся писать скрипт, потому что мои эксперименты с number тоже провалились

JavaScript
1
2
3
$("#TEST").on("change keyup input",function(){
    $(this)[($(this).val().length ? "remove" : "add")+"Class"]("invalid")
})

CSS
1
2
3
.invalid {
    border: solid 1px red;
}

@Oktu · 07.06.2016, 20:29 **[ТС]**

не работает.

Вот как у меня:

HTML5
1
<input class="calc_instrumentyi" id="TEST" type="number" step="1000" min="0" max="100000000" name="summa" value="$summa">

JavaScript
1
2
3
4
5
6
7
<script>
 
$("#TEST").on("change keyup input",function(){
    $(this)[($(this).val().length ? "remove" : "add")+"Class"]("invalid")
})
 
</script>

CSS
1
.invalid {border: 1px solid #ff0000;}

@BANO · 08.06.2016, 01:20

Oktu, а вы изначально поставьте класс invalid и всё будет работать

@Oktu · 08.06.2016, 07:28 **[ТС]**

Спасибо, за то, что пытаетесь помочь, сделайте еще попытку пожалйста.

Я не могу отказаться от класса

HTML5
1
class="calc_instrumentyi"

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

@BANO · 08.06.2016, 13:59

Oktu, а зачем ставить только один класс, их можно "складывать"

HTML5
1
class="calc_instrumentyi invalid"

@Oktu · 08.06.2016, 14:16 **[ТС]**

спасибо, но проблема в том что не работет код. понимаю, что моя пробелма, но может вы посмотрите что не так, рамка появляется, но при вводе данных она не исчезает

@BANO · 08.06.2016, 14:31

Oktu, а у меня ваш код с вашего поста работает

@Oktu · 08.06.2016, 14:55 **[ТС]**

не понимаю.... вобще убрал свой класс, оставил только invalid - рамка есть, но стационарная т.е. не исчезает....

@BANO · 08.06.2016, 15:33

Oktu, у вас это где-тто на сайте? дадите ссылку?

@Oktu · 08.06.2016, 15:47 **[ТС]**

https://jsfiddle.net/Oktu/5tgwe2xf/12/

даже если бурать строчку

CSS
1
border:1px solid #DBE0F7;

из input.calc_instrumentyi, рамка появляется, но исчезать при вводе не хочет

@BANO · 08.06.2016, 17:39

Oktu, вы jquery не подключили
вот у меня работает

@Oktu · 08.06.2016, 17:44 **[ТС]**

Но на сайте же у меня jquery подключен!!! может нужно особую версию подкллючить?

@BANO · 08.06.2016, 17:51

Oktu, ссылку на сайт дайте, я посмотрю что там такое

@Oktu · 08.06.2016, 17:52 **[ТС]**

да я пока делаю этот элемент на локальном сервеере, на сайт ничего не вылаживал

@BANO · 08.06.2016, 17:54

Oktu, вы посмотрите в коде, когда вводите данные у вас там класс меняется?

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью 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 , при. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	07.06.2016, 19:46
	скорее всего именно с этим связано 1

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	07.06.2016, 19:47 [ТС]
	Добавил, не помоголо, осталось как было 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.06.2016, 01:20
	Oktu, а вы изначально поставьте класс invalid и всё будет работать 1

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	08.06.2016, 14:16 [ТС]
	спасибо, но проблема в том что не работет код. понимаю, что моя пробелма, но может вы посмотрите что не так, рамка появляется, но при вводе данных она не исчезает 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.06.2016, 14:31
	Oktu, а у меня ваш код с вашего поста работает 0

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	08.06.2016, 14:55 [ТС]
	не понимаю.... вобще убрал свой класс, оставил только invalid - рамка есть, но стационарная т.е. не исчезает.... 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.06.2016, 15:33
	Oktu, у вас это где-тто на сайте? дадите ссылку? 1

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.06.2016, 17:39
	Oktu, вы jquery не подключили вот у меня работает 1

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	08.06.2016, 17:44 [ТС]
	Но на сайте же у меня jquery подключен!!! может нужно особую версию подкллючить? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.06.2016, 17:51
	Oktu, ссылку на сайт дайте, я посмотрю что там такое 1

@Oktu 65 / 3 / 1 Регистрация: 15.08.2012 Сообщений: 208
	08.06.2016, 17:52 [ТС]
	да я пока делаю этот элемент на локальном сервеере, на сайт ничего не вылаживал 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.06.2016, 17:54
	Oktu, вы посмотрите в коде, когда вводите данные у вас там класс меняется? 1