Показать различные типы шрифтов


У меня есть следующий код, который возвращает текст в различных шрифтов (на данный момент только шрифт TimesNewRoman и Arial). Он работает нормально, но если я хочу заставить его работать на 20 или более шрифтов (но не обязательно шрифт, также для шрифта-размер, или цвет, и т. д.) пришлось бы объявлять кучу переменных и очень долго JS-код. Не говоря уже о CSS код.

Я интересно, если есть другой способ сделать это в более простой способ и более закрытые на код результата.

var field, theDivTNR, theDivA;

function init() {
  console.log("page loaded and DOM is ready");
  field = document.querySelector("#inputField");
  theDivTNR = document.querySelector("#theDivTNR");
  theDivA = document.querySelector("#theDivA");
}

// The next function is called each type a key has been
// typed in the input field
function showWhatITyped() {
  // fill the div with the content of the input field
  theDivTNR.innerHTML = field.value;
  theDivA.innerHTML = field.value;
}
#theDivTNR{
 font-family: timesnewroman;
 font-size: 20px;
}
#theDivA{
 font-family: arial;
 font-size: 20px;
}
<html>
<head>
 <title>JavaScript Course</title>
 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="init();">
 <p>Type text here: <input type="text" oninput= "showWhatITyped();" id="inputField" ></p>
 <p>What you typed:</p>
 <p>TimesNewRoman</p>
 <div id="theDivTNR"></div>
 <p>Arial</p>
 <div id="theDivA"></div> 

</body>
</html>



127
2
задан 5 марта 2018 в 12:03 Источник Поделиться
Комментарии
3 ответа

Вы хотите, чтобы каждое имя шрифта должны быть перечислены только один раз. Вы можете поместить их в JavaScript, в CSS или HTML-код. Я рекомендую положить их в HTML, так как вы на самом деле хотите, чтобы они отображаются. Наименее трудоемкий способ, что я могу думать, является использование title атрибут на каждой <div>, затем сделать атрибут видимый с помощью CSS.

Вместо .innerHTMLЯ думаю, вы должны использовать .innerText. Разница в том, как он ведет себя в ответ на HTML-теги (например, <i>) и юридических лиц (например, &amp;), которые вводятся в текстовое поле. Если ваш запрос Говорит тип текста (не "типа HTML здесь"), и используется однострочное текстовое поле (вместо <textarea>), то я ожидаю, что он вести себя как текст, а не HTML.

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

Я предлагаю сделать <label> элемент, чтобы пойти с каждого <input> поле в HTML. Таким образом, если вы щелкните в любом месте на этикетке, поля ввода будут направлены.



function fontDemo() {
var displayFields = document.querySelectorAll(".fontDisplay");
var inputField = document.querySelector("#inputField");

displayFields.forEach(function(f) {
f.style.fontFamily = f.getAttribute('title');
f.innerText = '\n'; // Placeholder for spacing
});
inputField.addEventListener('input', showWhatITyped);

function showWhatITyped() {
displayFields.forEach(function(f) {
f.innerText = inputField.value || '\n';
});
}
}

document.addEventListener('DOMContentLoaded', fontDemo);


.fontDisplay {
margin-top: 0.5em;
font-size: 20px;
}

.fontDisplay::before { /* Make the title attribute visible */
content: attr(title);
display: block;
font: medium serif;
}


<html>
<head>
<title>JavaScript Course</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p><label>Type text here: <input type="text" id="inputField"></label></p>
<p>What you typed:</p>
<div class="fontDisplay" title="Times New Roman"></div>
<div class="fontDisplay" title="Arial"></div>
<div class="fontDisplay" title="Courier"></div>
<div class="fontDisplay" title="Verdana"></div>
</body>
</html>



1
ответ дан 5 марта 2018 в 07:03 Источник Поделиться

В JavaScript


var field, theDivTNR, theDivA;

Почему эти, в глобальном масштабе? Это хорошая привычка всегда создавать свои собственные рамки, чтобы не иметь нежелательных столкновений между скриптами, которые используют одни и те же имена.


  console.log("page loaded and DOM is ready");

Это отладочный код, и должны быть удалены, прежде чем код будет готов для рассмотрения.


// The next function is called each type a key has been
// typed in the input field
function showWhatITyped() {
// fill the div with the content of the input field
theDivTNR.innerHTML = field.value;
theDivA.innerHTML = field.value;
}

Что, если field.value это не действительный HTML? Я думаю, что это должно установить textContent вместо innerHTML.


HTML-код


  <script type="text/javascript" src="script.js"></script>

Если у вас есть src вам не нужно typeпоскольку тип может быть определен из заголовков HTTP.


<body onload="init();">

Это совсем некрасиво и очень старомодный. См., например, https://stackoverflow.com/q/799981/573420


  <p>Type text here: <input type="text" oninput= "showWhatITyped();" id="inputField" ></p>

Что oninput еще более уродливой, ненужной. Просто рефакторинг init способ сказать

  document.querySelector("#inputField").oninput = showWhatITyped;

Вы можете заметить, что это исключает field. Его не надо хранить его, при условии, что вы рефакторинг слушателя, чтобы обработать событие, которое передается ей. И, на самом деле, вы также можете выполнить рефакторинг это анонимная функция.


  <p>TimesNewRoman</p>
<div id="theDivTNR"></div>
<p>Arial</p>
<div id="theDivA"></div>

Вы спросили, Как получить более шрифты и т. д. Ответ прост: чтобы использовать цикл, а не реализует ее по руке. Добавить class="preview" для каждого просмотра ДИВС, а затем использовать document.querySelectorAll('.preview') чтобы заполучить их.

1
ответ дан 5 марта 2018 в 12:03 Источник Поделиться

Как правило, вы действительно отдельный стиль в CSS, логика в JS и HTML-контента. Но ваш случай довольно необычный случай того, что я думаю, оправдывает настройка стилей с помощью JavaScript.

Часть кода JavaScript:


  • Создать массив

  • Каждый объект в массиве является одной презентации (шрифт, цвет и т. д.)

  • Цикл по массиву. Для каждого объекта в массиве, добавить элемент div на странице с заданным форматированием. Пусть все они имеют хотя бы один общий класс.

  • Чтобы показать текст от пользователя, найти все элементы с классом Анс набор текста каждого из них с текстом пользователя.

Часть Усс:


  • Только вещи, общие для всех элементы. Пока нет шрифта/цвета специфические вещи здесь.

Часть html-код:


  • Пока нет шрифта/цвета специфические вещи здесь.

1
ответ дан 5 марта 2018 в 12:03 Источник Поделиться