Вопрос по javascript, focus, firefox, jquery – Предотвращение размытия, когда пользователь нажимает на определенный div, не работающий в Firefox

4

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

var clickedDiv = false;

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

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

Ваш Ответ

2   ответа
1

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;

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

4

метод 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.

Это прямое (грубое изменение) вашего точного кода. Однако, если я понимаю, что вы пытаетесь сделать правильно, вы пытаетесь сфокусировать поле ввода при нажатии на конкретный divwhen that input is in focus.

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

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

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

Ура,

JRH

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

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

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

Таким образом, хотя метод jquery вызывает обработчик событий фокуса, нативный метод фактически предоставляет фокус,hence causing the handler to be invoked, Это просто неудачная номенклатура, что имя этого метода накладывается.

@ Энди хм. Спасибо за чаевые :)
Вы должны установить тайм-аут на 0 мс, чтобы он работал, как только поток становится бездействующим. В противном случае вы можете увидеть мерцание фокуса на другом элементе. Событие размытия не может быть отменено.
Спасибо за быстрый ответ. Однако первое решение, которое вы написали, не сработало ни в одном браузере. Кроме того, мне любопытно, почему я должен использовать focus () для собственного элемента DOM вместо focus () для объекта jquery, потому что согласно документации jquery: сосредоточиться на поле ввода имени входа с идентификатором & login; login & apos; при запуске страницы попробуйте: $ (document) .ready (function () {$ (& quot; # login & quot;). focus ();}); Ваше другое решение довольно изящно, но есть ли способ просто отменить размытие все вместе вместо ожидания, чтобы снова сфокусироваться? Благодарю.

Похожие вопросы