Стиль внутреннего элемента contenteditable блока, фокусируясь на этом дочернем элементе - PullRequest
Новая
       27

Стиль внутреннего элемента contenteditable блока, фокусируясь на этом дочернем элементе

2 голосов
/ 04 мая 2020

Мне нужно стилизовать внутренний span элемент, который находится внутри contenteditable блока, фокусируясь на этом внутреннем span, он должен быть выделен, когда фокус. Это вообще возможно как-то? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="block" contenteditable="true" data-id="123">
        <p>
            Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere 
            atque aspernatur, pariatur architecto inventore explicabo eligendi 
            <span>maxime</span> laudantium corrupti esse ab nostrum, 
            at quis <span>quas</span> temporibus eum? Asperiores, iste.
        </p>
    </div>
    <style>
        .block {
            outline: none;
        }
        .block span {
            background-color: antiquewhite;
        }
        .block span:focus {
            background-color: red;
        }
    </style>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Вы можете использовать tabindex в тегах span. это решит вашу проблему.

вы можете узнать больше о tabindex здесь введите описание ссылки здесь

и фокус будет работать, когда вы используете клавиатуру. в этом случае используйте вкладку, чтобы получить фокус в тегах span. 

body {
  font-size: 1.2rem;
  line-height: 2rem;
}

.block {
  outline: none;
}
.block span {
  background-color: antiquewhite;
}
.block span:focus,.block span:hover {
  background-color: red;
  color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="block" contenteditable="true" data-id="123">
      <p>
        Lorem ipsum dolor sit amet <span tabindex=0>consectetur</span> adipisicing elit.
        Non facere atque aspernatur, pariatur architecto inventore explicabo
        eligendi <span tabindex=0>maxime</span> laudantium corrupti esse ab nostrum, at
        quis <span tabindex=0>quas</span> temporibus eum? Asperiores, iste.
      </p>
    </div>
  </body>
</html>
1 голос
/ 04 мая 2020

Чтобы выделить только элемент span, когда вы фокусируете его, попробуйте это в вашей таблице стилей:) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="block" contenteditable="true" data-id="123">
        <p>
            Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere 
            atque aspernatur, pariatur architecto inventore explicabo eligendi 
            <span>maxime</span> laudantium corrupti esse ab nostrum, 
            at quis <span>quas</span> temporibus eum? Asperiores, iste.
        </p>
    </div>
    <style>
        .block {
            outline: none;
        }
        .block span {
            background-color: antiquewhite;
        }
     
        [contenteditable="true"] span:active {
           background-color: red;
      }
       
    </style>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="block" contenteditable="true" data-id="123">
    <p>
      Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
      <span>maxime</span> laudantium corrupti esse ab nostrum, at quis <span>quas</span> temporibus eum? Asperiores, iste.
    </p>
  </div>
  <style>
    .block {
      outline: none;
    }
    
    .block span {
      background-color: antiquewhite;
    }
  </style>
  <script>
    let selectedElement = null;
    const setFocus = e => {
      if (selectedElement)
        selectedElement.style.backgroundColor = 'antiquewhite';

      selectedElement = window.getSelection().focusNode && window.getSelection().focusNode.parentNode;

      if (selectedElement && selectedElement.tagName == 'SPAN')
        selectedElement.style.backgroundColor = 'red';
    };
    document.onkeyup = setFocus;
    document.onmouseup = setFocus;
  </script>
</body>

</html>

Хорошо, поскольку вы запросили JavaScript, и я уже потратил много времени на этот вопрос, это мой последний ответ. Я знаю, что это не совсем правильно, но и не совсем неправильно. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="block" data-id="123">
    <p contenteditable="true">
      Lorem ipsum dolor sit amet </p><span contenteditable="true">consectetur</span>
    <p contenteditable="true"> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
    </p><span contenteditable="true">maxime</span>
    <p contenteditable="true"> laudantium corrupti esse ab nostrum, at quis </p><span contenteditable="true">quas</span>
    <p contenteditable="true"> temporibus eum? Asperiores, iste.
    </p>
  </div>
  <style>
    .block {
      outline: none;
    }
    
    .block span {
      background-color: antiquewhite;
    }
    
    .block span:focus {
      background-color: red;
    }
    
    p,
    span {
      display: inline;
    }
  </style>
</body>

</html>

Аналогичный случай здесь: CSS: фокусировка элементов внутри предмета спора

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...