Блог

Я создал инструмент для изучения, используя 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 для замены каждого символа в ключевом слове подчеркиванием, но возникли еще две проблемы. Во-первых, даже если количество символов останется прежним, ширина может измениться.. Например, «apple» имеет разную физическую длину с «______». Это не идеально, поскольку поток документов изменился бы. Вторая проблема заключается в том, что я не могу придумать никакого способа вернуть ключевые слова обратно после преобразования их в подчеркивания.

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

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

Вы можете сделать это с помощью css, добавив псевдоэлемент и вместо использования visibility hidden, используя color: transparent, вот так:

 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

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

 div {
  color: black;
}
span {
  color: white;
  text-decoration: none;
  border-bottom: 2px solid green;
}  

 <div>
This <span>is hidden</span> with an underline
</div>  

Вам пришлось бы найти какой-то способ расположить 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 — это точная длина текста.

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