CSS / JS / HTML - выделение выбора пользователя - PullRequest
Новая
       3

CSS / JS / HTML - выделение выбора пользователя

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

Я пытаюсь написать некоторый код, чтобы позволить пользователю выделять части содержимого веб-сайта. Для этого я заменяю выбор пользователя (selectedText) на HTML (<div class = "highlight">selectedText</div>) - и это работает ( cf . Code ниже).

Проблема в том, что перенос выбранного текста таким образом переопределяет остальную часть CSS и разрушает макет, независимо от тега HTML, используемого в качестве контейнера (div, span, em, mark, хр ...). Я прошу прощения, если решение этой проблемы очевидно, я совершенно новый для веб-разработчика.

JS

document.addEventListener("mouseup", function() {
  var selectedText = getSelectedText();
  if (selectedText.length > 0) {
    div = document.createElement("div");
    div.innerHTML = selectedText.trim();
    div.classList.add("highlight");
    replaceSelection(div);
  }
});

CSS 

div.highlight {
  background-color: #F5E283;
  display: inline;
}


div.highlight {
  background-color: yellow;
}
<! DOCTYPE HTML>
<html>

<body>
  <h1>Please, select this h1</h1>
  <p>and this text at the same time</p>
  
  <h1>Now, select <i>a part of this one</i></h1>
  <p>with this text</p>
  <p></p>
</body>

</html>

1 Ответ

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

Мне кажется, я понимаю проблему. Если у вас есть стилизация для элемента h1, выделение текста удалит стилизацию h1, так как выделенный элемент становится дочерним для h1. Попробуйте это, если вы, например, хотите изменить цвет: 

h1, h1 div.highlight{
  color: red;
}

или 

h1{
  color: red;
}

div.highlight{
  color: inherit;
  background-color: #F5E283;
  display: inline;
}

Я также заметил проблему с обрезкой - если я выберу 'this' в Строка 'select this h1', завершающий пробел обрезается, и вы получаете 'select thish1', который я поддерживаю не так, как вы хотите.

Будет ли это работать без selectedText.trim ()?

Крутая функция, так что она полностью работает!

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

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

...