Это забавная вещь, научиться программировать. Есть большое чувство выполненного долга, когда вы думаете о чем-то, чего не существует, и воплощаете это в жизнь самостоятельно.
Недавно я закончил кое-что, над чем хотел поработать — Инструмент SEO для заголовков и описаний, который обновляет текст по мере ввода и показывает его так, как он будет отображаться на страницах результатов поисковой системы (SERP).
Работая в SEO, я пишу много контента для веб-сайтов, и мне нужен был простой инструмент, который помог бы мне писать такие вещи, как мета-заголовки и описания. Я хотел, чтобы он обновлял текст в режиме реального времени с предварительным просмотром, похожим на SERP, и предупреждал меня, когда количество символов приближается к пределу.
Мы всегда должны думать в первую очередь о мобильных устройствах и знать, как это будет выглядеть в результатах мобильного поиска. Если ваш заголовок или описание слишком длинное, Google обрежет их в результатах, например:
Код
В инструменте есть текстовые поля для ввода заголовка и описания. Первая проблема заключалась в том, чтобы текст обновлялся по мере того, как кто-то печатал в текстовом поле.
var object = document.getElementById('objectID'); object.onkeyup = object.onkeypress = function(){ document.getElementById('previewID').innerHTML = this.value;В приведенном выше примере я использую JS-событие onkeyup и событие onkeypress для захвата каждой нажатой клавиши, а также для записи символов в случае, если кто-то держит клавишу нажатой. Затем innerHTML области, просматриваемой в реальном времени, будет обновлен с помощью this.value или введенного текста.
if($('#previewID').text().length > maxLength) { $('#previewID').text($('#previewID').text().substr(0, maxLength - 3) + "..."); };Продолжая непосредственно ниже, мы сравним длину текста с максимальной длиной, какой бы вы ни хотели. Мы хотим сказать, что ЕСЛИ длина текста, который мы печатаем, больше заданной нами максимальной длины, ТО мы хотим использовать JavaScript метод substr() чтобы обрезать строку, начиная с 0 символов и заканчивая нашей максимальной длиной -3, чтобы учесть три эллипса, которые мы собираемся добавить.
Итак, все мысли вместе выглядят так:
var object = document.getElementById('objectID'); object.onkeyup = object.onkeypress = function(){ document.getElementById('previewID').innerHTML = this.value; if($('#previewID').text().length > maxLength) { $('#previewID').text($('#previewID').text().substr(0, maxLength - 3) + "..."); }; };Использование метода substr() позволяет нам остановить текст, как только будет достигнуто максимальное число, и заменить конец многоточием, как это сделал бы Google в поисковой выдаче. Даже если мы продолжим печатать, все, что будет отображаться, — это многоточие, показывающее, что заголовок или описание слишком длинные.
Дополнительные ресурсы
Если вы просто делаете это в одну строку, CSS-Tricks показывает хороший пример более простого способа сделать это с помощью только CSS. Кроме того, у Intel есть отличное чтение, которое, по сути, показывает то, что я сделал выше, плюс правильный способ делать эллипсы (чего я не делал).
Я сделал вещь!
Я понял это с помощью интернета и хотел написать и поделиться своим опытом. Если у вас есть какие-либо советы по улучшению, я весь внимание!
Было круто начать с того, что я увидел то, чего не было, как я хотел, построил это и заставил это работать, хотя бы для личного использования. Я надеюсь, что это помогло объяснить мой процесс, и я с нетерпением жду возможности делать больше таких сообщений в будущем.
p.s.
Когда я ввожу метаданные в свою панель Ghost Dashboard для этого сообщения в блоге, я понимаю, что это почти то же самое, что и здесь!
Знаешь что, он полностью держится. Я даже набрал слишком длинное описание, и счетчик символов стал красным, а в предварительном просмотре описания появились многоточия. Я очень горжусь собой, должен сказать.
Я понимаю, что это больше для моей гордости, чем для чтения, поэтому я приношу свои извинения — но осознание было довольно забавным моментом!
Первоначально опубликовано на blog.benthom.me 12 мая 2017 г.
