Как изменить цвет input javascript



Как изменить цвет input javascript

используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.»> элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.

Value

value элемента используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.»> типа color всегда является DOMString , который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранен в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведет к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведет к тому, что цвет будет установлен на #000000.

Использование настроек цвета

Входные данные типа color просты из-за ограниченного числа атрибутов, которые они поддерживают.

Предоставление цвета по умолчанию

Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:

Если вы не зададите значение, то по умолчанию будет #000000 , то есть черный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ»#», за которым следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придется преобразовать их в шестнадцатеричные перед установкой значения.

Отслеживание изменений цвета

Как и в случае с другими типами используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.»> , есть два события, которые могут быть использованы для обнаружения изменения цвета значения: input и change . input запускается на элементе каждый раз, когда меняется цвет. change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value .

Вот пример, который наблюдает за изменениями со временем значения цвета:

Выбор значения

Если реализация элемента используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.»> типа color в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует color , select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.

Вариации внешнего вида

Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:

То же самое можно увидеть и в Firefox 55:

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

Validation

Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс или элементы, контент которых не проходит валидацию, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.»> :invalid .

Пример

Давайте создадим пример, который делает немного больше с цветом входного сигнала путем отслеживания change и input событий, чтобы взять новый цвет и применить его к каждому элемента в документе.

JavaScript

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

Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузки startup() :

Это возвращает ссылку на элемент color в переменной colorWell , а затем устанавливает значение входного цвета в значение defaultColor . То цвет входное input событие настроено, чтобы вызвать updateFirst() функцию и change событие, вызывается updateAll() . Они оба видны ниже.

Наконец, мы вызываем select () для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

Реакция на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция updateFirst() вызывается в ответ на input событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку input события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.

Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие change . Мы обрабатываем это событие с помощью функции updateAll() , используя Event.target.value для получения окончательного выбранного цвета:

Это устанавливает цвет каждого элемента представляет собой абзац.»>

Источник

смена цвета input

Все работает нормально, только вот не меняет цвет background. В консоле выводит следующее:»Cannot set property ‘backgroundColor’ of undefined
at pressBtn»

Изменение цвета поля Input при наборе текста (именно при наборе,а не при установке курсора мышки в поле Input)
Добрый день всем! Подскажите пожалуйста код, позволяющий сделать следующие действия. Есть поле.

Смена input при клике
Добрый день! Немного странное задание, но всё же. У меня есть html код, в котором прописана.

Смена цвета текста
Всем привет. Подскажите пожалуйста, как сделать скрипт, что бы была возможность выбирать цвет.

Смена цвета JavaScript
Задание: есть две кнопки, при нажатии на любую из них он (кнопки) меняются цветами. Вот как я.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Смена цвета элементов
Создайте страницу. Разместите на странице 5 элементов div и кнопку. Создайте CSS файл, определите в.

Смена цвета div
Здравствуйте. Есть, допутсим три, дива. Нужно написать функцию которая будет менять их цвет через.

Смена цвета фона кнопкой
Всем привет! Как нажатием на кнопки изменить цвет области div, а не всего фона? .

Плавная смена цвета слова
Вот, к примеру, слово написано красным цветом, а когда наводишь на него мышкой, оно медленно и.

Источник

Изменение цвета фона тега input после заполнения

INPUT — Изменение цвета текста/фона, Placeholder & AutoComplete
Как изменить цвет(а) & фон(ы) : Самого поля ввода INPUT Placeholder AutoComplete

Оперативное изменение цвета фона и цвета символов строки.
я уже задала строку,вывела на экран в виде бесконечно бегущей строки. осталось сделать оперативное.

Плавное изменение цвета фона по времени в рандомные цвета
В общем, есть изображение (фон), мне необходимо, чтобы оно плавно окрашивалось в различные цвета.

Изменение фона при сохранении рисунка из тега canvas
У меня возникла такая сложность — В моей программке для рисования на теге canvas можно рисовать.

Чтобы при заполнении одного input менялся фон на этом же.

Спасибо всем. Попробую сегодня и отпишусь.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

изменение размера текста тега
Всех с наступившими праздниками! Подскажите пожалуйста, а можно ли уменьшить размер текста тега.

Изменение фона — плавное изменение цвета
Не фурычит плавное изменение цвета. Если переменные r g b через рандом то всё работает отлично.

Изменение цвета фона
Добрый день, товарищи пользователи. Подскажите, пожалуйста, что я начудил. Я каким-то неведомым.

Изменение цвета фона
Народ, помогите. С HTML знаком плохо. Задача такая, нужно изменить цвет фона и текста по нажатию.

Источник

Javascript change color of text and background to input value

I’m going to use javascript to make a function for changing color of background, as well as text simultaneously — based on the value of a text input. I’ve got the background color to change, but can’t manage to get the text working as well.

Looking into the code above, the code for the text document.getElementById(«coltext»).style.color = x works when I input an actual color, and not the «color» value.

This is the html which of I’m referring to (I know it’s horribly optimized, but it’s a work in progress):

Obviously, and unfortunately, I can’t use the code this way. But no matter have hard I try, beyond this, I reach a sort of infinite complexity. It should be a sort of easy way to resolve this, right?

3 Answers 3

Things seems a little confused in the code in your question, so I am going to give you an example of what I think you are try to do.

First considerations are about mixing HTML, Javascript and CSS:

I will be removing inline content and splitting these into their appropriate files.

Next, I am going to go with the «click» event and displose of the «change» event, as it is not clear that you want or need both.

Your function changeBackground sets both the backround color and the text color to the same value (your text will not be seen), so I am caching the color value as we don’t need to look it up in the DOM twice.

CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).

Hex values are written as 3 double digit numbers, starting with a # sign.

Update: as pointed out by @Ian

Hex can be either 3 or 6 characters long

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

Here is an alternative function that will check that your input is a valid CSS Hex Color, it will set the text color only or throw an alert if it is not valid.

For regex testing, I will use this pattern

but if you were regex matching and wanted to break the numbers into groups then you would require a different pattern

Here is a further modification that will allow colours by name along with by hex.

Источник

Как изменить цвет текста и фона в текстовом поле?

Задача

Установить цвет фона и текста для однострочного текстового поля формы.

Решение

Цвет фона элемента задается стилевым свойством background-color , а цвет текста с помощью color , эти свойства необходимо добавить к селектору INPUT . Поскольку тег является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.

Пример 1. Цвет текста и фона в текстовом поле

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля после добавления к нему стилей

В данном примере добавляется новый класс с именем colortext , он добавляется к тегу с помощью конструкции class=»textfield» .

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу в этом случае всегда добавляется атрибут type . Используя запись INPUT[type=»text»] задаем стиль для всех элементов , но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).

Пример 2. Использование селекторов атрибутов

Источник