Div onblur не работает

Styled-компоненты onFocus и событие onBlur не работает

Я использую React JS + Typescript для своего приложения. Для стилизации я использую styled-components. Я действительно новый в стиле компонентов. Я создал один выпадающий список. Логика работает отлично. Но когда я нахожусь за пределами выпадающего меню, все равно отображается список опций. Я хочу скрыть список, когда он находится вне выпадающего списка. Я пробовал каждый путь, но у меня ничего не получалось. Это выглядит так, когда он выходит за focus :

Это мой компонент Dropdown .

Это родительский компонент

2 ответа

Если я понимаю вашу проблему / вопрос, похоже, вы хотите, чтобы раскрывающийся список закрывался, когда терял фокус.

Редактировать — использовать функцию «обрабатывать внешние события», не беспокойтесь об управлении фокусом

Создайте эффект, который добавляет / удаляет прослушиватель событий для события, происходящего за пределами оболочки раскрывающегося списка.

Нужно было сделать обертку элементом неблокированного уровня, иначе вы должны нажать полностью над или под раскрывающимся списком.

Помните, что onBlur означает, что элемент теряет фокус. Это происходит, когда другой элемент получает фокус или вы просто щелкаете где-то на странице, а не когда курсор перемещается.

Еще одна вещь, которую я заметил, это то, что вы используете переменную isOpened , чтобы определить, нужно ли визуализировать ваш ItemList и вращать каретку, но в методах onFocus и onBlur вы устанавливаем состояние isFocussed .

Кажется, что вы просто используете setIsFocussed, но никогда не используете сам себя. Возможно, вы захотите проверить ESLint, это поможет вам обнаруживать такие ошибки, как это легко.

Источник

Функция Div-onblur

Я хочу вызвать onblur на div . Не знаю, как это сделать.

Попробовал вот это:

но это не сработало

3 ответа

Привет У меня есть div, который содержит три текстовых поля, мне нужна функция, которая будет вызвана, как только элемент управления выйдет из тега div, я не хочу использовать событие onclick, потому что фокус можно переместить из div, нажав клавишу tab на клавиатуре или каким-либо другим.

У меня есть div в таблице

. Когда я добавляю событие onBlur, ничего не происходит. Когда я меняю onBlur на другое событие, оно работает. Кто-нибудь знает, как я могу добавить onBlur в div:

Чтобы событие blur сработало на элементе, элемент должен сначала получить фокус. Но по умолчанию элементы

Вы можете добавить tabindex=»0″ или contentEditable в свой div, чтобы он получил фокус.

Событие размытия срабатывает при потере фокуса. По умолчанию элемент div не может иметь фокус в первую очередь, поэтому он не может быть потерян.

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

Если вы дадите div атрибут tabindex, он сможет принять фокус:

затем прикрепите обработчики событий фокусировки и размытия Например:

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

http://jsfiddle.net/58gw8sr7 / Мой html моя функция function formatDate(date)

у меня есть функция link_to_function, которая показывает скрытый div. теперь я хотел бы скрыть этот div, если пользователь нажмет на этот div (onBlur или onclick). когда и как следует вызывать эту.

Как и выше, у меня есть кнопка, при нажатии на которую открывается подменю. Для каждого варианта в подменю есть три элемента (на самом деле их больше, я думаю, но для простоты сохраню их как 3). Я.

Привет У меня есть div, который содержит три текстовых поля, мне нужна функция, которая будет вызвана, как только элемент управления выйдет из тега div, я не хочу использовать событие onclick.

У меня есть div в таблице

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

У меня есть следующая настройка: Вход с событием onblur: 1 div с событием onclick :

Как я могу извлечь innerHTML из события onBlur? Ранее я использовал только обработчики событий onChange и onClick. В этих случаях аргумент события (или, по крайней мере, первый аргумент), переданный.

Я хочу выполнить функцию после того, как элемент div покинул фокус. Я использую функции tabIndex и onBlur внутри div. И он прекрасно работает, когда я вручную ставлю фокус, нажав на любой из.

Поэтому я пытаюсь создать форму поиска, которая, когда она теряет фокус, будет использовать другую функцию для поиска чего-то и отображения результатов. Поэтому, когда я набираю слово, после того.

Источник

OnBlur не работает на div

У меня есть div в таблице

. Когда я добавляю событие onBlur, ничего не происходит. Когда я меняю onBlur на другое событие, оно работает.

Кто-нибудь знает, как я могу добавить onBlur в div:

1 ответ

У меня есть следующая настройка: Вход с событием onblur: 1 div с событием onclick :

Я использую реагировать-перо в качестве текстового редактора в приложение реагировать. Я должен хранить содержимое текстового редактора в локальном состоянии React и отправлять только значение до Redux ‘onBlur’. Моя проблема заключается в том, что onBlur не будет работать, когда после фокусировки.

onblur — это ment для элементов, которые имели фокус, поэтому, как правило, входные данные. Div не может быть сфокусирован, поэтому его нельзя размыть.

Вы имели в виду onmouseout ?

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

Я пытаюсь использовать onblur, чтобы кнопка home появлялась при прокрутке определенной ссылки. Это код в теле.

В моем приложении on blur event не работает на chrome, хотя он работает на IE-9. Для функции размытия я написал angular.element(‘#outerDiv’).live(‘blur’, function (e) < >Пожалуйста, дайте мне.

Я хочу вызвать onblur на div . Не знаю, как это сделать. Попробовал вот это: div onblur=javascript:callme() но это не сработало

У меня есть следующая настройка: Вход с событием onblur: 1 div с событием onclick :

Я использую реагировать-перо в качестве текстового редактора в приложение реагировать. Я должен хранить содержимое текстового редактора в локальном состоянии React и отправлять только значение до.

Функция проверки поля даты не выполняет onBlur ниже. Я не знаю, чего мне здесь не хватает. Просто пытаюсь проверить простую валидацию.

Я понимаю, что теги Div или Span не применяются к onblur или onfocus. Почему бы не обратиться? Есть ли какой-то элемент, который не работает?

Как я могу извлечь innerHTML из события onBlur? Ранее я использовал только обработчики событий onChange и onClick. В этих случаях аргумент события (или, по крайней мере, первый аргумент), переданный.

Я хочу выполнить функцию после того, как элемент div покинул фокус. Я использую функции tabIndex и onBlur внутри div. И он прекрасно работает, когда я вручную ставлю фокус, нажав на любой из.

Источник

Функция Div-onblur

Я хочу вызвать onblur на div . Не знаю, как это сделать.

Попробовал вот это:

но это не сработало

3 ответа

Привет У меня есть div, который содержит три текстовых поля, мне нужна функция, которая будет вызвана, как только элемент управления выйдет из тега div, я не хочу использовать событие onclick, потому что фокус можно переместить из div, нажав клавишу tab на клавиатуре или каким-либо другим.

У меня есть div в таблице

. Когда я добавляю событие onBlur, ничего не происходит. Когда я меняю onBlur на другое событие, оно работает. Кто-нибудь знает, как я могу добавить onBlur в div:

Чтобы событие blur сработало на элементе, элемент должен сначала получить фокус. Но по умолчанию элементы

Вы можете добавить tabindex=»0″ или contentEditable в свой div, чтобы он получил фокус.

Событие размытия срабатывает при потере фокуса. По умолчанию элемент div не может иметь фокус в первую очередь, поэтому он не может быть потерян.

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

Если вы дадите div атрибут tabindex, он сможет принять фокус:

затем прикрепите обработчики событий фокусировки и размытия Например:

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

http://jsfiddle.net/58gw8sr7 / Мой html моя функция function formatDate(date)

у меня есть функция link_to_function, которая показывает скрытый div. теперь я хотел бы скрыть этот div, если пользователь нажмет на этот div (onBlur или onclick). когда и как следует вызывать эту.

Как и выше, у меня есть кнопка, при нажатии на которую открывается подменю. Для каждого варианта в подменю есть три элемента (на самом деле их больше, я думаю, но для простоты сохраню их как 3). Я.

Привет У меня есть div, который содержит три текстовых поля, мне нужна функция, которая будет вызвана, как только элемент управления выйдет из тега div, я не хочу использовать событие onclick.

У меня есть div в таблице

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

У меня есть следующая настройка: Вход с событием onblur: 1 div с событием onclick :

Как я могу извлечь innerHTML из события onBlur? Ранее я использовал только обработчики событий onChange и onClick. В этих случаях аргумент события (или, по крайней мере, первый аргумент), переданный.

Я хочу выполнить функцию после того, как элемент div покинул фокус. Я использую функции tabIndex и onBlur внутри div. И он прекрасно работает, когда я вручную ставлю фокус, нажав на любой из.

Поэтому я пытаюсь создать форму поиска, которая, когда она теряет фокус, будет использовать другую функцию для поиска чего-то и отображения результатов. Поэтому, когда я набираю слово, после того.

Источник

onBlur для элемента div в React

Я хочу выполнить функцию после того, как элемент div покинул фокус.

Я использую функции tabIndex и onBlur внутри div. И он прекрасно работает, когда я вручную ставлю фокус, нажав на любой из элементов внутри div. Но по умолчанию, когда ни один элемент не нажат внутри div, он не работает.

Мой компонент-это функциональный компонент & div визуализируется динамически, поэтому я также не могу установить фокус с помощью useRef.

Код после того, как я нажму на значок, чтобы показать DIV

Код после onBlur вызывается

Так как же мне заставить onBlur работать с элементом div?

Следующее изображение показывает текущую направленность

1 ответ

Я хочу вызвать onblur на div . Не знаю, как это сделать. Попробовал вот это: div onblur=javascript:callme() но это не сработало

У меня есть div в таблице

. Когда я добавляю событие onBlur, ничего не происходит. Когда я меняю onBlur на другое событие, оно работает. Кто-нибудь знает, как я могу добавить onBlur в div:

blur событие может быть очень хитрым, особенно если у вас есть фокусируемые элементы внутри фокусируемого элемента. Откройте консоль и немного поиграйте с этим фрагментом кода, чтобы лучше понять, как работают события ‘blur’ и ‘focus’.

blur event won’t happen if you click inside focused element. Exception if you have another focusable element inside and you click on it. But Notice that after main blur you will see input focus and main focus and if you will click outside of the main element you will also see two blur events: input blur and after that main blur

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

Я пишу компонент React (v0.14.7+), который должен вызвать обратный вызов onBlur (переданный через props), когда курсор покидает компонент (через tab, щелчок мыши или сенсорное событие). Проблема.

Как и выше, у меня есть кнопка, при нажатии на которую открывается подменю. Для каждого варианта в подменю есть три элемента (на самом деле их больше, я думаю, но для простоты сохраню их как 3). Я.

У меня есть два элемента: и динамически создаваемый (все это часть программы.

Я хочу вызвать onblur на div . Не знаю, как это сделать. Попробовал вот это: div onblur=javascript:callme() но это не сработало

У меня есть div в таблице

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

Я подключаюсь к довольно большому проекту React JS, который использует react-data-grid для отображения кучи редактируемых данных. Прямо сейчас вам нужно нажать кнопку обновления, чтобы отправить.

Я реализую автозаполнение/combobox в dart. Для этого я использую два элемента: a и a

для предложений. Я хочу скрыть через css стиль display: none всякий раз, когда.

Мое приложение react выводит текстовый ввод, который имеет функции для обработки как onKeyDown (использует условное выражение, чтобы проверить, является ли ключ ‘Enter’ или ‘Backspace’), так и.

В моем приложении React Native у меня есть a, к которому я хочу добавить стиль, когда он сфокусирован (измените textAlign с ‘center’ на ‘left’). Он отлично работает в iOS, но кажется, что на Android.

Как я могу извлечь innerHTML из события onBlur? Ранее я использовал только обработчики событий onChange и onClick. В этих случаях аргумент события (или, по крайней мере, первый аргумент), переданный.

Источник