Onfocus и onblur для div

@Bigeron · Регистрация: 01.02.2013

Author24 — интернет-сервис помощи студентам

Всем привет.

Конструкция такая:

HTML5

<div id="mainbox">
    <input type="text" onblur="hideResBox();" />
    <div id="resultbox">
        <div id="res1"></div> 
        <div id="res2"></div> 
        <div id="res3"></div> 
    </div>
</div>

Javascript

1
2
3

function hideResBox(){
    $("#resultbox").hide();
}

По сути дела аналог поиска, т.е. в инпут вводится текст, через ajax результат поиска записывается в resultbox по пунктам ( res1, res2 ... resN ).

Не знаю, как реализовать следующее: при потери фокуса с mainbox прячем resultbox ( т.е. при потере фокуса с input при клике по одному из res'ов resultbox должен оставаться на месте )

@Lazy_Den · 13.12.2016, 03:02

Bigeron, добавляете атрибут tabindex="0" элементу #mainbox.

Javascript

var mainbox = $('#mainbox'),
    innerElements = $('*', mainbox).get();
mainbox.on('blur', function(e) {
    if (innerElements.indexOf(e.relatedTarget)) {
        $('#resultbox').hide();
    }
});

Результат

@Bigeron · 14.12.2016, 00:58 **[ТС]**

Lazy_Den, не совсем то, но почти )) Ставим курсор ( фокус ) в инпут и кликаем за пределы mainbox'а - в этом случаи, resultbox должен прятаться

@Lazy_Den · 14.12.2016, 01:21

Сообщение от Bigeron

в этом случаи

Именно в таком порядке? Тогда так

Javascript

var mainbox = $('#mainbox'),
    innerElements = $('*', mainbox).andSelf().get();
 
$(':text', mainbox).on('blur', function(e) {
    if (innerElements.indexOf(e.relatedTarget) < 0) {
        $('#resultbox').hide();
    }
});

@Bigeron · 15.12.2016, 02:37 **[ТС]**

То что нужно ) Спасибо большое )

@Bigeron 4 / 4 / 0 Регистрация: 01.02.2013 Сообщений: 139
	14.12.2016, 00:58 [ТС]	3
	Lazy_Den, не совсем то, но почти )) Ставим курсор ( фокус ) в инпут и кликаем за пределы mainbox'а - в этом случаи, resultbox должен прятаться 0

@Bigeron 4 / 4 / 0 Регистрация: 01.02.2013 Сообщений: 139
	15.12.2016, 02:37 [ТС]	5
	То что нужно ) Спасибо большое ) 0

Опции темы