CSS :селектор фокуса с помощью Javascript

#javascript #css #css-selectors

#язык JavaScript #CSS #css-селекторы

Вопрос:

У меня есть множество кнопок, которые я создаю с помощью тега «кнопка».Я использую :селектор фокусировки, чтобы изменить цвет кнопки на желтый с другого цвета, когда я нажимаю на нее.

Теперь у меня есть код Javascript,который делает то же самое (меняет цвет фона кнопки),разница только в том, что он подключен к входу.

вот пример:

 function coloringButton() {  let myInput = document.getElementById("numbers");  let lastChar = myInput.value.slice(-1);   switch (lastChar) {  case '1':  document.getElementById("Two").style.backgroundColor = 'gray';  document.getElementById("One").style.backgroundColor = 'yellow';  break;   case '2':  document.getElementById("One").style.backgroundColor = 'gray';  document.getElementById("Two").style.backgroundColor = 'yellow';  break;  } }

 #One, #Two {  background-color: gray; }  #One:focus, #Two:focus {  background-color: yellow; }

 lt;input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'gt; lt;button type="button" id='One'gt;  lt;spangt;1lt;/spangt;  lt;/buttongt; lt;button type="button" id='Two'gt;  lt;spangt;2lt;/spangt;  lt;/buttongt;

Когда я сначала нажимаю на кнопку:фокус работает. Моя проблема в том,что после запуска кода javascript с вводом (введите символы для ввода) селектор :фокус больше не работает, если я попытаюсь нажать какую-либо кнопку. Есть ли возможность, чтобы эффект :фокус вернулся к работе после этого кода javascript без использования события onclick с javascript?

Ответ №1:

.style Свойство имеет приоритет над стилями, которые исходят из CSS.

Вы можете использовать !important флаг в стилях CSS, чтобы переопределить это.

 function coloringButton() {  let myInput = document.getElementById("numbers");  let lastChar = myInput.value.slice(-1);  switch (lastChar) {  case '1':  document.getElementById("Two").style.backgroundColor = 'gray';  document.getElementById("One").style.backgroundColor = 'yellow';  break;   case '2':  document.getElementById("One").style.backgroundColor = 'gray';  document.getElementById("Two").style.backgroundColor = 'yellow';  break;   } }

 #One {  background-color: gray; }  #One:focus {  background-color: yellow !important; }  #Two {  background-color: gray; }  #Two:focus {  background-color: yellow !important; }

 lt;input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'gt; lt;button type="button" id='One'gt;  lt;spangt;1lt;/spangt;  lt;/buttongt; lt;button type="button" id='Two'gt;  lt;spangt;2lt;/spangt;  lt;/buttongt;

1. Тх! Еще один маленький вопрос об этом, если вы можете ответить: может ли селектор каким-то образом отключить результат какой-либо функции в javascript? Например :селектор фокусировки отключает цветовую кнопку (), поэтому, когда я нажимаю кнопку «Вкл», другая кнопка меняется на стиль по умолчанию.

2. Нет, но функция может проверить document.activeElement , какой элемент сфокусирован, и соответствующим образом изменить то, что она делает.

Ответ №2:

Я бы добавил дополнительный случай к вашей функции:

 case '':  document.getElementById("One").style = null;  document.getElementById("Two").style = null;  break;

Это отменит изменения, внесенные в кнопки js, и вернется к стилю CSS, оставив все остальное как есть. Также это предотвращает сценарий, в котором в поле ввода есть «1», который меняет цвет кнопки 1 на желтый, и вы фокусируетесь на кнопке 2 вручную, также меняя ее цвет на желтый.1