Предотвращение размытия, когда пользователь нажимает на определенный div, не работающий в Firefox

Я использую jquery, чтобы сосредоточиться на текстовом поле, когда вы нажимаете на определенный div. Он хорошо работает в Internet Explorer, но не в Firefox. Какие-либо предложения?

var clickedDiv = false;

$('input').blur(function() { if (clickedDiv) { $('input').focus(); } });

$('div').mousedown(function() { clickedDiv = true; })
        .mouseup(function() { clickedDiv = false });

javascript focus jquery firefox
person Community    schedule 08.07.2009    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Обратите внимание: метод focus() для объекта jquery на самом деле не фокусирует его: он просто вызывает обработчик фокуса! чтобы на самом деле сфокусировать элемент, вы должны сделать это:

var clickedDiv = false;
$('input').blur( function() {
    if(clickeddiv)  {
        $('input').each(function(){this[0].focus()});
    }
}
$('div').mousedown(function() { clickedDiv = true; })
        .mouseup(function() { clickedDiv = false });

Обратите внимание, что я использовал метод focus() для собственных объектов DOM, а не для объектов jquery.

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

Вот мое мнение о том, как вы это сделаете:

var inFocus = false;
$('#myinput').focus(function() { inFocus = true; })
             .blur(function() { inFocus = false; });
$('#mydiv').mousedown(function() {
    if( inFocus )
        setTimeout( function(){ $('#myinput')[0].focus(); }, 100 );
}

Обратите внимание: я дал тайм-аут для фокусировки рассматриваемого ввода, так что ввод может фактически выйти из фокуса в то же время. В противном случае мы бы уделяли ему внимание непосредственно перед тем, как оно вот-вот потеряет его. Что касается решения 100 мс, то здесь действительно случайность.

Ваше здоровье,

младший

EDIT в ответ на комментарий @Jim

Первый метод, вероятно, не сработал, потому что это был неправильный подход для начала.

Что касается второго вопроса, мы должны использовать .focus() для собственного объекта DOM, а не для оболочки jQuery вокруг него, потому что собственный метод .focus() заставляет объект фактически захватывать фокус, в то время как метод jquery просто вызывает обработчик событий, связанный< /em> с событием focus.

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

person jrharshath    schedule 08.07.2009
comment
Спасибо за быстрый ответ. Однако первое решение, которое вы написали, не работало ни в одном из браузеров. Кроме того, мне любопытно, почему я должен использовать focus() для собственного элемента DOM вместо focus() для объекта jquery, потому что в соответствии с документацией jquery: чтобы сосредоточиться на поле ввода входа с идентификатором «логин» при запуске страницы , попробуйте: $(document).ready(function(){ $(#login).focus(); }); Ваше другое решение довольно изящно, но есть ли способ просто отменить размытие вместе, вместо того, чтобы ждать, чтобы снова сфокусироваться? Спасибо. - person ; 08.07.2009
comment
Вы должны установить тайм-аут на 0 мс, чтобы он запускался, как только поток становится бездействующим. В противном случае вы можете увидеть мерцание фокуса на другом элементе. Событие размытия не может быть отменено. - person Andy E; 08.07.2009

arrow_upward
1
arrow_downward

Я решил это, просто заменив событие размытия на document.onclick и проверив щелкнутый элемент, если он не введен или div

var $con = null; //the input object
var $inp = null; // the div object

function bodyClick(eleId){
    if (eleId == null || ($inp!= null && $con != null && eleId != $inp.attr('id') &&   
            eleId != $con.attr('id'))){
        $con.hide();
    }
}
function hideCon() { 
    if(clickedDiv){
         $con.hide();
    }

}
function getEl(){
var ev = arguments[0] || window.event,
origEl = ev.target || ev.srcElement;
eleId = origEl.id;
bodyClick(eleId);
}
document.onclick = getEl;

надеюсь, вы найдете это полезным

person Heba    schedule 26.09.2010