Как изменить текст на невидимый, но при этом показать подчеркивание? - PullRequest
Новая
       95

Как изменить текст на невидимый, но при этом показать подчеркивание?

4 голосов
/ 09 апреля 2019

Я сделал учебный инструмент, используя Javascript и PHP.Есть переключатель, который показывает / скрывает ключевые слова в абзаце, так что пользователь может мысленно «заполнить пробелы».

Пока я сделал это так, что все ключевые слова подчеркнуты, и я используюселектор DOM для выбора всех innerHTML в тегах u. 

<p>
  Example sentence, <u>this</u> is a <u>keyword</u>.
</p>
<button onClick='hideKeywords()'>Hide Keywords</button>

<script>
  function hideKeywords() {
    var x = Array.from(document.getElementsByTagName('u'));
    for (var i = 0; i < x.length; i++) {
      x[i].style.visibility = "hidden";
    }
  }
</script>

Это работает так, как задумано - «ключевые слова» не отображаются и поток документа не изменяется, поскольку ключевые слова по-прежнему занимают одно и то же месточто они обычно берут.

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

Я думал об использовании Javascript для замены каждого символа в ключевом слове подчеркиванием, но всплывают еще две проблемы.Одна вещь состоит в том, что даже если количество символов остается неизменным, ширина может измениться. Например, «яблоко» не является такой же физической длиной, как «______».Это не идеально, поскольку поток документов изменится.Вторая проблема заключается в том, что я не могу придумать способ вернуть ключевые слова после преобразования их в подчеркивание.

Один из способов - вместо изменения видимости на «скрытый», я мог бы изменить цвет фонав тот же цвет, что и текст.Это блокирует текст, но структура строк и поток документов сохраняются.Тем не менее, я надеюсь найти способ реализовать мою оригинальную идею, поэтому мы будем благодарны за любые предложения!

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

Ответы [ 3 ]

5 голосов
/ 09 апреля 2019

Вы можете сделать это с помощью CSS, добавив псевдоэлемент и вместо использования скрытой видимости, используя цвет: прозрачный, например: 

u{
  position:relative;
}
u::after{
  content: ' ';
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
  height:1px;
  background-color:#000;
}

И в сценарии 

<script>
  function hideKeywords() {
    var x = Array.from(document.getElementsByTagName('u'));
    for (var i = 0; i < x.length; i++) {
      x[i].style.color= transparent;
    }
  }
</script>

https://codepen.io/anon/pen/ROoMaM

0 голосов
/ 09 апреля 2019

Вы должны найти способ разместить div под скрытым текстом, но вы можете использовать следующий код для создания div с шириной текста. Я могу вернуться позже после ответа и найти способ позиционирования div.

Допустим, в вашем HTML есть фраза foo bar, которую вы хотите скрыть. Вы назначите ему идентификатор с кодом: <p id="foo">foo bar</p>

Вот CSS: 

#foo {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

Тогда в своем Javascript вы можете использовать следующий код: 

var fontSize = 20;                          //this defines a font size   
var foo = document.getElementById("foo");
foo.style.fontSize = fontSize;              //this sets the style as the font size
var width = (foo.clientWidth) + "px"

var div = document.createElement("div");
div.style.width = width;
div.style.height = 2px;
div.style.background = "red";      //makes the underline visible

document.getElementById("main").appendChild(div);

Отсюда вы, вероятно, могли бы просто переставить div так, как вы хотите, чтобы он отображался под текстом. Таким образом, div - это точная длина текста.

Альтернативным решением будет использование моноширинного шрифта, а затем вычисление ширины вручную.

0 голосов
/ 09 апреля 2019

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

div {
  color: black;
}
span {
  color: white;
  text-decoration: none;
  border-bottom: 2px solid green;
}
<div>
This <span>is hidden</span> with an underline
</div>
...