Как настроить ввод: стиль фокуса программно с использованием JavaScript

Question

Я создаю библиотеку пользовательского интерфейса в JS, которая может, не полагаясь на таблицы стилей CSS, создавать компоненты пользовательского интерфейса, стилизованные из кода. До сих пор это было довольно просто, за исключением стилизации различных состояний управления (таких как ввод: фокус один).

Код, который я использую для создания поля ввода:

function newInput()
{
    var ctr = docmuent.createElement("input");
    ctr.setAttribute("type","text");
    ctr.setAttribute("value", some-default-value);
    ctr.style.fontFamily = "sans-serif,helvetica,verdana";
    /* some font setup here, like color, bold etc... */
    ctr.style.width = "256px";
    ctr.style.height = "32px";
    return ctr;
}

Стилизовать его для состояния по умолчанию легко. Однако я не уверен, как установить стиль для таких состояний, как фокус, отключен или нередактируемый.

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

Кто-нибудь знает, как установить стиль для состояния поля ввода (например, input:focus) прямо из кода JS?

Нет JQuery, пожалуйста:-) Просто прямой JS.

Заранее спасибо!

Answer 1

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

var input = document.getElementById("something");
input.addEventListener("focus", function () {
  this.style.backgroundColor = "red";  
});

<input type="text" id="something" />

Answer 2

Используйте переменные CSS, если это возможно

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

Вместо этого, если у вас есть контроль над CSS, просто сделайте это в своем CSS:

      .my-class {
  --focusHeight: 32px;
  --focusWidth: 256px;
}

.my-class:focus {
  height: var(--focusHeight);
  width: var(--focusWidth);
}

Тогда в вашем JavaScript это так же просто, как использование setPropertyдля обновления переменных:

      const el = document.getElementById('elementId');
el.style.setProperty('--focusHeight', newFocusHeight);
el.style.setProperty('--focusWidth', newFocusWidth);

Answer 3

Другой альтернативой будет создание таблицы стилей для страницы.

Что-то вроде этого:

 var styles='input:focus {background-color:red}';

 var styleTag=document.createElement('style');
 if (styleTag.styleSheet)
     styleTag.styleSheet.cssText=styles;
 else 
     styleTag.appendChild(document.createTextNode(styles));

 document.getElementsByTagName('head')[0].appendChild(styleTag);

Таким образом, у вас будет чистое разделение стилей CSS от сценариев и, следовательно, лучшее обслуживание.

Answer 4

Сначала создайте свой ввод:

<input type="text" id="myElementID" />

Затем добавьте в javascript следующий javascript:

const element = document.getElementById("myElementID");

// Add a box shadow on focus
element.addEventListener("focus", (e) => {
  e.target.style.boxShadow = "0 0 0 3px #006bff40";
});

// Remove the box shadow when the user doesn't focus anymore
element.addEventListener("blur", (e) => {
  e.target.style.boxShadow = "";
});

Answer 5

Быстрый oneliner, который динамически добавляетstyleтег к телу.

Answer 6