Как изменить толщину шрифта для каждой набранной буквы javascript - PullRequest
Новая
       45

Как изменить толщину шрифта для каждой набранной буквы javascript

1 голос
/ 14 июля 2020

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

<p id="testarea" contentEditable="true">
   Type your text hereeeeeeeeeee
</p>

<button type="button" onclick="myFunction2()">uncensour</button>

<script>
   document.getElementById("testarea").onkeypress = function () { 
   myFunction() }
   document.getElementById("testarea").addEventListener("input", myFunction);
   var initWeight = 101;
   function myFunction() {
      document.getElementById("testarea").style.fontWeight = initWeight++ ;
   }
   function myFunction2() {
      document.getElementById("testarea").style.fontWeight = "101";
   }


   function myFunction2() {
      document.getElementById("testarea").style.fontWeight = "101";
   }
</script>

1 Ответ

0 голосов
/ 14 июля 2020

Насколько я знаю, к сожалению, нет реального способа стилизовать отдельные символы в одном элементе. Поэтому вам, вероятно, потребуется разделить набранный текст на отдельные символы и заключить их в элемент (например, Span). Таким образом, у вас есть каждый персонаж в отдельном элементе, который вы можете стилизовать индивидуально. Для этого вам понадобится немного JS, и, вероятно, вам следует просто поиграть с этими подходами, пока вы не будете счастливы.

Посмотрите этот Topi c, например, здесь, второй ответ может быть хорошим началом для вас:

Динамическое применение CSS к отдельным символам?

Это может помочь вам найти решение, соответствующее вашим ожиданиям.

...