Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2018, 18:56
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Определение элемента в фокусе
Всем привет. Подскажите пожалуйста ответ вот на такой вопрос. в jquery есть вот такая выборка:
$('selector:focus')
Как реализовать данную вещь на native javascript?
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2018, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

s24344,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  :focus{
      background-color: #228B22;
      color: #FFFFFF;
  }

  </style>

  <script>
document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('focus',
    function(event) {
       if(event.target.closest(".selector")) document.querySelector('.show').innerHTML = event.target.tagName;
    },true)
  });
  </script>
</head>

<body>

<p class="selector" tabindex="1">click me</p>
<input name="" class="selector" value="click me">
<button class="selector" >click me</button>

<div class="show"></div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2018, 19:45
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2018, 10:07
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

А так?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  :focus{
      background-color: #228B22;
      color: #FFFFFF;
  }

  </style>

  <script>
document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('focus',
    function(event) {
        document.querySelector('.show').innerHTML = document.querySelector('.selector:focus').tagName;
    },true)
  });
  </script>
</head>

<body>

<p class="selector" tabindex="1">click me</p>
<input name="" class="selector" value="click me">
<button class="selector" >click me</button>

<div class="show"></div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2018, 11:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Dilettante_Pro,
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2018, 11:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Как просил клиент
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2018, 11:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
=) Есть такая же ванильная фича
Ответить с цитированием
  #8 (permalink)  
Старый 19.07.2018, 11:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от j0hnik
Есть такая же ванильная фича
вы про что?
Ответить с цитированием
  #9 (permalink)  
Старый 19.07.2018, 11:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

:focus
Ответить с цитированием
  #10 (permalink)  
Старый 19.07.2018, 11:16
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

$("div:animated")
а если так =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
autocomplete, обработка элемента списка при фокусе culver jQuery 12 29.06.2014 14:52
Определение элемента, который дропнулся. gof jQuery 1 18.05.2014 09:34
Определение прокрутки сайта до нужно элемента FanAizu jQuery 1 22.08.2013 17:43
Определение перетаскивания элемента (Sandr) Элементы интерфейса 1 07.03.2012 14:13
Загрузка элемента при фокусе и не только login18 Events/DOM/Window 5 10.12.2010 18:40