0

Написал простенький скрипт для создания placeholder'a у select элементов. Выдает ошибку

TypeError: event is undefined

Попробовал в слушателе событий обернуть функцию, которая реагирует на событие, обернуть в анонимную функцию и передать основной объект событий, не помогло, в чем проблема может быть?

И следующий вопрос, как можно вернуть placeholder на место, если пользователь ничего не выбрал, а просто убрал фокус с элемента? Интересует конкретно, как отловить тот момент, что пользователь ничего не выбрал?

function SelectPlaceholder(options) {

  this.select = document.querySelectorAll(options.selectSelector);
  this.styleClass = options.placeholderStyleClass;

  self = this;

  this.deletePlaceholder = function(event) {
    var currentElement = event.target;
    var placeholderChild = currentElement.querySelector(options.placeholderSelector);

    if (placeholderChild) {
      currentElement.removeChild(placeholderChild);
    }

  }

  (function() {
    for (var i = 0; i < self.select.length; i++) {
      self.select[i].classList.add(self.styleClass);
    }
  }());

  for (var i = 0; i < this.select.length; i++) {
    this.select[i].addEventListener('focus', function() {
      self.deletePlaceholder(event)
    });
  }


}

new SelectPlaceholder({
  selectSelector: '.field-line__select',
  placeholderSelector: '.field-line__select-placeholder',
  placeholderStyleClass: 'selectplaceholder-field',
});
<select class="field-line__select">
  <option value="" class="field-line__select-placeholder">Открыть список улиц</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

1
  • Чем Вам не нравится стандартный способ: <option value="" disabled selected>Открыть список улиц</option> ? Проясните логику скрипта.
    – UModeL
    10 сен 2018 в 16:33

2 ответа 2

0
this.select[i].addEventListener('focus', function(event) { // !!!
  self.deletePlaceholder(event)
});

//(function() {
  for (var i = 0; i < self.select.length; i++) {
    self.select[i].classList.add(self.styleClass);
  }
//}());

пользователь ... убрал фокус с элемента

addEventListener.('blur', ...
1
  • Добавил, не помогло
    – uzi_no_uzi
    10 сен 2018 в 15:05
0

Не совсем понятно при наведение на что у Вас должен срабатывать placeholder. Как я понял при наведение на select. Как вариант:

 let select = document.getElementsByClassName('field-line__select');
    select[0].addEventListener('mouseenter', function (e) { 
      //тут работаем с элементом.
      console.log(e.target)
    })

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.