javascript - 在 ap 标签中显示输入而不更改字体

问题描述

我想制作一个字体预览器，用户可以在其中输入特定单词并根据所选字体更改其字体。我已经完成了整个事情，但被困在最后一刻。

我已经对输入中的字体更改进行了实时预览。现在我想在 ap 标签中以所选字体输出输入。我不知道该怎么办。

请忽略我所有的英语错误。谢谢你。

const content = document.querySelector('#content');
const fontListElement = document.querySelector('#fonts');

const controls_selectedFont = document.querySelector('.selected-font');
let fontListFragment = document.createDocumentFragment();


fetch('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyD2XlgdSV2aMaFApwYwRZPGty_5PDSUaZA')
  .then((r) => r.json())
  .then((fontsObject) => {
    for (font of fontsObject.items) {
      let fontFamily = font.family;
      let li = document.createElement('li');
      li.classList.add('font');
      li.setAttribute('data-value', fontFamily);
      li.setAttribute('tabindex', 0);
      li.innerText = fontFamily;
      li.style.fontFamily = fontFamily;

      fontListFragment.appendChild(li);
    }

    fontListElement.appendChild(fontListFragment);


    let chunkedFonts = chunk(fontsObject.items, 12);

    let importStatements = chunkedFonts
      .map((chunkedFontsArr) => {
        return `@import "https://fonts.googleapis.com/css?family=${chunkedFontsArr
          .map((f) => f.family)
          .join('|')}"`;
      })
      .join(';');

    let fontsStyle = document.createElement('style');
    fontsStyle.type = 'text/css';
    fontsStyle.innerHTML = importStatements;
    document.getElementsByTagName('head')[0].appendChild(fontsStyle);
  });

fontListElement.addEventListener('click', (e) => {
  if (isFontListItem(e.srcElement)) {
    let li = e.srcElement;
    let fontFamily = li.dataset.value;
    content.style.fontFamily = fontFamily;
    selectedFont(fontFamily);
    copyButton(fontFamily);
    e.stopPropagation();
  }
});

fontListElement.addEventListener('keyup', (e) => {
  if (e.keyCode == 9 && isFontListItem(e.target)) document.activeElement.click();
});

function isFontListItem(clickedElm) {
  return clickedElm.classList.contains('font');
}

function chunk(ar, size) {
  let buffer = [];
  return ar.reduce((acc, item, i) => {
    let isLast = i === ar.length - 1;

    if (buffer.length === size) {
      let theChunk = [...buffer];
      buffer = [item];
      return [...acc, theChunk];
    } else {
      buffer.push(item);
      if (isLast) {
        return [...acc, buffer];
      } else {
        return acc;
      }
    }
  }, []);
}

function searchFonts() {
  var input, filter, font, i, txtValue;
  input = document.querySelector("#font-search");
  filter = input.value.toUpperCase();
  font = document.getElementsByTagName("li");
  for (i = 0; i < font.length; i++) {
    txtValue = font[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      font[i].style.display = "";
    } else {
      font[i].style.display = "none";
    }
  }
}

function selectedFont(fontName) {
  controls_selectedFont.innerText = fontName;
}

function checkSpace(font) {
  return font.replace(/\s/g, '+');
}

function init() {
  controls_selectedFont.innerText = 'Please select a font...';
}
init();

var word = document.getElementById('content'),
  originalStory = document.getElementById('story'),
  button = document.getElementById("submitButton");

button.onclick = function() {
  replaceStory(word.value);
};

var replaceStory = function(userWord) {
  var story = ("A " + userWord + " is now part of the story");

  return originalStory.innerHTML = story;
};

aside {
  width: 100%;
  height: 30%;
}

aside .selected-font,
span {
  font-size: 22px;
  font-family: 'Quicksand', sans-serif;
  text-align: center;
}

aside .search-font {
  margin: 10px 0;
  text-align: center;
}

aside .search-font input {
  font-size: 15px;
  padding: 5px 10px;
}

aside #fonts {
  width: 100%;
  height: 200px;
  background: #F9F9F9;
  font-size: 1.2rem;
  padding-left: 0;
  overflow-y: scroll;
  list-style: none;
}

aside #fonts li {
  padding: 5px;
  cursor: pointer;
}

#content {
  margin-top: 20%;
  width: 50%;
}

#content:focus {
  outline: 0;
}

<div>
  <div>
    <aside>
      <span><strong>Current Font:</strong></span><br>
      <div class="selected-font"></div>
      <div class="search-font">
        <input type="text" id="font-search" aria-label="Search fonts" placeholder="Search...." onkeyup="searchFonts()">
      </div>

      <ul id="fonts"></ul>

    </aside>
  </div>
  <div>

    <input type="text" name="fontTxtField" id="content" class="fontTxtField" placeholder="Your text here" /></div>
  <input type="button" value="submit" id="submitButton"></input>
  <p id="story"> A {userWord} is now part of the story </p>
</div>

标签： javascripthtmlcss

您可以使用 Javascript 在 ap 中复制/粘贴您输入的内容。

我在输入中监听 keydown，然后更改具有相同类的 p 元素的 innerHTML。

注意，你会丢失你的第一句话，所以如果你删除输入的内容，你最终会得到一个空白 p。如果输入中没有写任何内容，也许您可以添加一个 if 来使用您的基本句子。

您还可以使用 contenteditable，如 secan 所说，让用户尝试使用特定字体的其他句子。

const myInput = document.getElementById('myInput');
    const textToChange = document.querySelectorAll('.fontTrial');
    myInput.addEventListener('keydown', changeText, false);

    function changeText(){
      const inputContent = this.value;
      textToChange.forEach(function(el){
        el.innerHTML = inputContent;
      })
    }

<input type="text" id="myInput" placeholder="Change the content">
<p class="fontTrial" contenteditable="true">This is a basic text.</p>
<p class="fontTrial" contenteditable="true">Another text to edit.</p>

javascript - 在 ap 标签中显示输入而不更改字体

问题描述

解决方案

推荐阅读