Написал простенький скрипт для создания 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>
<option value="" disabled selected>Открыть список улиц</option>
? Проясните логику скрипта.