Блог

Резюме: Я создал строку поиска с тремя входными данными: имя, дата рождения и номер социального страхования. Функциональность есть, но я пытаюсь улучшить дизайн и сталкиваюсь с проблемой фокусировки ввода.

Когда пользователь выбирает входные данные, в моем CSS появляются эффекты фокусировки. То, что я пытаюсь сделать, это переключать изображения в фокусе ввода. В настоящее время они написаны следующим образом:

 <div class="adv-searchbar__wrapper__search-box">
     <span class="column-1"><img src="/img/person-name.png" class="input-ico"/><input type="text" class="input" id="adv-input-1" placeholder="John Adam Smith"></span>
     <span class="column-2"><input type="date" class="input" id="adv-input-2" placeholder="MM / DD / YY"></span>
     <span class="column-3"><img src="/img/person-ssn.png" class="input-ico"/><input type="text" class="input" id="adv-input-3" placeholder="### - ## - ####"></span>
     <button type="submit" class="advSearchBtn"><img src="/img/search_white.png"/></button>
</div>
  

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

Усилие: Я пытался использовать операторы if-else в jQuery, когда пользователь нажимает на ввод. Проблема с тем, что я обнаружил, заключается в том, что я не уверен, как «измерить», когда пользователь покидает ввод. Таким образом, хотя изображение изменится правильно, оно не изменится обратно, как только пользователь перейдет дальше.

 $('.input').click(function() {
 let currIco = $(this)[0].previousSibling.src.slice(0, -4);
 if ($(this).is(':focus')) {
   console.log('input is focused');
     currIco = currIco   '__focus.png';
     $(this)[0].previousSibling.src = currIco;
 } else {
   console.log('input is blurred');
 }
});
  

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

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

Поскольку CSS по-прежнему является вашим вариантом, и его намного проще реализовать в CSS (плюс у вас еще нет ответа на JS), взгляните на решение ниже.

К вашему сведению, использование только CSS также является более эффективным вариантом — чем больше клиентской обработки вы добавляете, тем медленнее загружается страница и тем хуже для SEO и пользовательского опыта.

 .column-1 input, .column-3 input {
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 40px;
}
.column-1 input {
  background-image: url(https://lorempixel.com/output/abstract-q-c-30-30-1.jpg);
}
.column-1 input:focus {
  background-image: url(https://lorempixel.com/output/abstract-q-c-30-30-2.jpg);
}
.column-3 input {
  background-image: url(https://lorempixel.com/output/abstract-q-c-30-30-3.jpg);
}
.column-3 input:focus {
  background-image: url(https://lorempixel.com/output/abstract-q-c-30-30-4.jpg);
}  

 <div class="adv-searchbar__wrapper__search-box">
  <span class="column-1">
         <input type="text" class="input" id="adv-input-1" placeholder="John Adam Smith">
     </span>
  <span class="column-2"><input type="date" class="input" id="adv-input-2" placeholder="MM / DD / YY"></span>
  <span class="column-3"><input type="text" class="input" id="adv-input-3" placeholder="### - ## - ####"></span>
  <button type="submit" class="advSearchBtn"><img src="/img/search_white.png"/></button>
</div>  

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

Вы могли бы, в качестве альтернативы существующему ответу (предоставленному FluffyKitten), создать <label> элемент и поместить его после <input> .

Я тоже не рекомендую использовать JavaScript over CSS , если вы действительно можете сделать это в CSS .

В этом случае вы можете отделить значок (и, следовательно, стиль) от остальной части поля ввода, если вы того пожелаете.

 .adv-searchbar__wrapper__search-box span {
  position: relative;
}

.input {
  box-sizing: border-box;
  padding: 2px 2px 2px 20px;
  max-height: 20px;
  border: 1px solid #888;
}

.input~.icon {
  position: absolute;
  left: 2px;
  top: 0px;
  height: 16px;
  width: 16px;
  background-image: url('https://via.placeholder.com/16?text=icon');
  background-repeat: no-repeat;
}

.input:focus~.icon {
  filter: blur(1px);
  background-image: url('https://via.placeholder.com/16/FF9900');
}  

 <div class="adv-searchbar__wrapper__search-box">
  <span class="column-1">
    <input type="text" class="input" id="adv-input-1" placeholder="John Adam Smith">
    <label class="icon" for="adv-input-1"></label>
  </span>
  <span class="column-2">
    <input type="date" class="input" id="adv-input-2" placeholder="MM / DD / YY">
  </span>
  <span class="column-3">
    <input type="text" class="input" id="adv-input-3" placeholder="### - ## - ####">
    <label class="icon" for="adv-input-3"></label>
  </span>
  <button type="submit" class="advSearchBtn">
    <img src="https://via.placeholder.com/16?text=amp;nbsp;"/>
  </button>
</div>  

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

 span:focus-within .input-ico-focus { 
  display: inline-block;
}
span:focus-within .input-ico { 
  display: none 
}
span .input-ico-focus { 
  display: none 
}
span .input-ico { 
  display: inline-block; 
}
.input-ico, .input-ico-focus {
  width: 16px;
}  

 <div>
     <span class="column-1">
      <img src="https://i.stack.imgur.com/pd8J3.png" class="input-ico">
      <img src="https://i.stack.imgur.com/XdkNO.png" class="input-ico-focus">
      <input type="text" class="input" id="adv-input-1" placeholder="John Adam Smith">
     </span>
</div>