Фокусировка, если щелкнуть не по элементам (см. скрипку)

У меня есть значок «очистить», который динамически отображается в моем поле ввода, когда я что-то пишу. События нажатия клавиш и фокуса обрабатывают это хорошо, единственное, что я хочу, чтобы значок удалялся, когда поле ввода не находится в режиме фокуса. Проблема в том, что у меня есть событие click на значке, поэтому, если я нажму на значок, сработает событие focusout. Я не могу понять это.

$(".searchInput").focusout(function(e) {
    console.log(e);

    if(e.currentTarget != this) {
        if ($(".keypress").length > 0) {
            $(".keypress").remove();
        }
    }
})

Я собрал небольшую скрипку: http://jsfiddle.net/w9RbW/.

Как видите, если входное значение не пусто, значок все еще там, я не знаю, как проверить, щелкнули ли его, или что-то в этом роде...


javascript focus jquery jquery-click-event jquery-focusout
person oskarno    schedule 16.01.2013    source источник
comment
Я не вижу значка нигде в скрипке...   -  person Brian Salta    schedule 16.01.2013
comment
Хм, сбоку от поля ввода должно появиться маленькое черное поле, если вы что-то в него наберете.   -  person oskarno    schedule 16.01.2013

Ответы (4)


arrow_upward
0
arrow_downward

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

Демо: http://jsfiddle.net/w9RbW/10/

// Have the clear icon in there all the time
$("<span class='keypress'><i class='icon-remove-sign'></i></span>").appendTo($(".searchInput").parent()); 

$(".keypress").click(function(e) {
  if($(this).css('opacity') == 0) return;
  $(".searchInput").val("").focus();
  $(this).css('opacity', '0'); // hide it after clearing the text
})

// focusout
$(".searchInput").blur(function(e) {
  $(".keypress").css('opacity', '0'); // hide it on blur
})

$(".searchInput").focus(function() {
  if ($(".searchInput").val() != "") {
    $(".keypress").css('opacity', '1'); // show it
  }
})

$(".searchInput").keyup(function() {
  if($(this).val() != "") {
    $(".keypress").css('opacity', '1');
  } else {
    $(".keypress").css('opacity', '0');
  }
})
person techfoobar    schedule 16.01.2013
comment
Да, именно так, поэтому я подумал, что вы могли бы просто проверить, зависла ли иконка или что-то в этом роде. Это решение работает, но вы все равно можете щелкнуть и стереть. - person oskarno; 16.01.2013
comment
Код немного изменен, чтобы отменить клик, если значок не виден. Проверьте обновленный ответ и демонстрацию. - person techfoobar; 16.01.2013
comment
Ах, да, это кажется более удобным для пользователя, особенно когда он будет использоваться на смартфонах со всеми неуклюжими пальцами. Я тоже сначала так думал, но сойдет. Спасибо! - person oskarno; 16.01.2013

arrow_upward
1
arrow_downward

См. это http://jsfiddle.net/w9RbW/8/.

Если вы хотите удалить значок только тогда, когда он не в фокусе.

    $(".searchInput").focusout(function(e) {
  $(".keypress").css('opacity', '0');
        if(e.currentTarget != this) {
            if ($(".keypress").length > 0) {
                $(".keypress").remove();
            }
        }
    })
person Mohammad Adil    schedule 16.01.2013
comment
Да, это я знаю. Но значок очистки должен быть кликабельным и очищать поле ввода, может быть, я не был так ясен в этом. Итак, это должно работать, но также и событие щелчка. - person oskarno; 16.01.2013
comment
Неа. Значок Никогда не должен быть виден, если ввод не имеет фокуса или если ничего не написано. - person oskarno; 16.01.2013
comment
добавление $(.keypress).css('непрозрачность', '0'); будет делать работу см. редактировать - person Mohammad Adil; 16.01.2013
comment
Нет, это то же самое, что и раньше, теперь нельзя нажать на иконку, потому что фокусаут раньше срабатывает и прячет его. - person oskarno; 16.01.2013

arrow_upward
0
arrow_downward

почему бы вам не установить таймер для проверки каждые 10 секунд, есть ли значок «очистить» или нет! Как только вы обнаружите, что текстовое поле потеряло фокус, вы можете удалить этот значок очистки и остановить этот таймер.

Использование jQuery для проверки наличия фокуса на вводе

person gurvinder372    schedule 16.01.2013
comment
Звучит как обходной путь, я должен быть в состоянии просто удалить его, если я каким-то образом не щелкну значок. - person oskarno; 16.01.2013
comment
Да, идеально четкая иконка должна удаляться по событию 'blur' или 'onmouseout'. - person gurvinder372; 16.01.2013

arrow_upward
0
arrow_downward

В качестве обходного пути вы можете установить/удалить какой-либо флаг при наведении/отсутствии значка и проверить его в событии focusout.

person antejan    schedule 16.01.2013
comment
Хм, я не думаю, что понимаю, может быть, вы можете привести мне пример? Скрипка в вопросе. - person oskarno; 16.01.2013