Почему не редактируется поле вручную javascript
Перейти к содержимому

Почему не редактируется поле вручную javascript

  • автор:

Фокусировка: focus/blur

Элемент получает фокус, когда пользователь кликает по нему или использует клавишу Tab . Также существует HTML-атрибут autofocus , который устанавливает фокус на элемент, когда страница загружается. Есть и другие способы получения фокуса, о них – далее.

Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь.

Момент потери фокуса («blur») может быть важнее. Это момент, когда пользователь кликает куда-то ещё или нажимает Tab , чтобы переключиться на следующее поле формы. Есть другие причины потери фокуса, о них – далее.

Потеря фокуса обычно означает «данные введены», и мы можем выполнить проверку введённых данных или даже отправить эти данные на сервер и так далее.

В работе с событиями фокусировки есть важные особенности. Мы постараемся разобрать их далее.

События focus/blur

Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.

Используем их для валидации(проверки) введённых данных.

  • Обработчик blur проверяет, введён ли email, и если нет – показывает ошибку.
  • Обработчик focus скрывает это сообщение об ошибке (в момент потери фокуса проверка повторится):
 .invalid < border-color: red; >#error Ваш email: >; input.onfocus = function() < if (this.classList.contains('invalid')) < // удаляем индикатор ошибки, т.к. пользователь хочет ввести данные заново this.classList.remove('invalid'); error.innerHTML = ""; >>; 

Современный HTML позволяет делать валидацию с помощью атрибутов required , pattern и т.д. Иногда – это всё, что нам нужно. JavaScript можно использовать, когда мы хотим больше гибкости. А ещё мы могли бы отправлять изменённое значение на сервер, если оно правильное.

Методы focus/blur

Методы elem.focus() и elem.blur() устанавливают/снимают фокус.

Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

 .error Ваш email:   

Это сработает во всех браузерах, кроме Firefox (bug).

Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда onblur вернёт фокус обратно.

Отметим, что мы не можем «отменить потерю фокуса», вызвав event.preventDefault() в обработчике onblur потому, что onblur срабатывает после потери фокуса элементом.

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

Потеря фокуса, вызванная JavaScript

Потеря фокуса может произойти по множеству причин.

Одна из них – когда посетитель кликает куда-то ещё. Но и JavaScript может быть причиной, например:

  • alert переводит фокус на себя – элемент теряет фокус (событие blur ), а когда alert закрывается – элемент получает фокус обратно (событие focus ).
  • Если элемент удалить из DOM, фокус также будет потерян. Если элемент добавить обратно, то фокус не вернётся.

Из-за этих особенностей обработчики focus/blur могут сработать тогда, когда это не требуется.

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

Включаем фокусировку на любом элементе: tabindex

Многие элементы по умолчанию не поддерживают фокусировку.

Какие именно – зависит от браузера, но одно всегда верно: поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: , , , и т.д.

Это можно изменить HTML-атрибутом tabindex .

Любой элемент поддерживает фокусировку, если имеет tabindex . Значение этого атрибута – порядковый номер элемента, когда клавиша Tab (или что-то аналогичное) используется для переключения между элементами.

То есть: если у нас два элемента, первый имеет tabindex=»1″ , а второй tabindex=»2″ , то находясь в первом элементе и нажав Tab – мы переместимся во второй.

Порядок перебора таков: сначала идут элементы со значениями tabindex от 1 и выше, в порядке tabindex , а затем элементы без tabindex (например, обычный ).

При совпадающих tabindex элементы перебираются в том порядке, в котором идут в документе.

Есть два специальных значения:

  • tabindex=»0″ ставит элемент в один ряд с элементами без tabindex . То есть, при переключении такие элементы будут после элементов с tabindex ≥ 1 . Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными .
  • tabindex=»-1″ позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод elem.focus() будет действовать.

Например, список ниже. Кликните первый пункт в списке и нажмите Tab :

    Один Ноль Два Минус один

Страница: DOMContentLoaded, load, beforeunload, unload

У жизненного цикла HTML-страницы есть три важных события:

  • DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки и стили, могут быть ещё не загружены.
  • load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
  • beforeunload/unload – пользователь покидает страницу.

Каждое из этих событий может быть полезно:

  • Событие DOMContentLoaded – DOM готов, так что обработчик может искать DOM-узлы и инициализировать интерфейс.
  • Событие load – внешние ресурсы были загружены, стили применены, размеры картинок известны и т.д.
  • Событие beforeunload – пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.
  • unload – пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.

Давайте рассмотрим эти события подробнее.

DOMContentLoaded

Событие DOMContentLoaded срабатывает на объекте document .

Мы должны использовать addEventListener , чтобы поймать его:

document.addEventListener("DOMContentLoaded", ready); // не "document.onDOMContentLoaded = . "
  

В этом примере обработчик DOMContentLoaded запустится, когда документ загрузится, так что он увидит все элементы, включая расположенный ниже .

Но он не дожидается, пока загрузится изображение. Поэтому alert покажет нулевой размер.

На первый взгляд событие DOMContentLoaded очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.

DOMContentLoaded и скрипты

Когда браузер обрабатывает HTML-документ и встречает тег , он должен выполнить его перед тем, как продолжить строить DOM. Это делается на случай, если скрипт захочет изменить DOM или даже дописать в него ( document.write ), так что DOMContentLoaded должен подождать.

Поэтому DOMContentLoaded определённо случится после таких скриптов:

    

В примере выше мы сначала увидим «Библиотека загружена…», а затем «DOM готов!» (все скрипты выполнены).

Скрипты, которые не блокируют DOMContentLoaded

Есть два исключения из этого правила:

  1. Скрипты с атрибутом async , который мы рассмотрим немного позже, не блокируют DOMContentLoaded.
  2. Скрипты, сгенерированные динамически при помощи document.createElement(‘script’) и затем добавленные на страницу, также не блокируют это событие.

DOMContentLoaded и стили

Внешние таблицы стилей не затрагивают DOM, поэтому DOMContentLoaded их не ждёт.

Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:

   

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

Так как DOMContentLoaded дожидается скриптов, то теперь он так же дожидается и стилей перед ними.

Встроенное в браузер автозаполнение

Firefox, Chrome и Opera автоматически заполняют поля при наступлении DOMContentLoaded .

Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении DOMContentLoaded он попытается заполнить их (если получил разрешение от пользователя).

Так что, если DOMContentLoaded откладывается из-за долгой загрузки скриптов, в свою очередь – откладывается автозаполнение. Вы наверняка замечали, что на некоторых сайтах (если вы используете автозаполнение в браузере) поля логина и пароля не заполняются мгновенно, есть некоторая задержка до полной загрузки страницы. Это и есть ожидание события DOMContentLoaded .

window.onload

Событие load на объекте window наступает, когда загрузилась вся страница, включая стили, картинки и другие ресурсы. Это событие доступно через свойство onload .

В примере ниже правильно показаны размеры картинки, потому что window.onload дожидается всех изображений:

  

window.onunload

Когда посетитель покидает страницу, на объекте window генерируется событие unload . В этот момент стоит совершать простые действия, не требующие много времени, вроде закрытия связанных всплывающих окон.

Обычно здесь отсылают статистику.

Предположим, мы собрали данные о том, как используется страница: клики, прокрутка, просмотры областей страницы и так далее.

Естественно, событие unload – это тот момент, когда пользователь нас покидает и мы хотим сохранить эти данные.

Для этого существует специальный метод navigator.sendBeacon(url, data) , описанный в спецификации https://w3c.github.io/beacon/.

Он посылает данные в фоне. Переход к другой странице не задерживается: браузер покидает страницу, но всё равно выполняет sendBeacon .

Его можно использовать вот так:

let analyticsData = < /* объект с собранными данными */ >; window.addEventListener("unload", function() < navigator.sendBeacon("/analytics", JSON.stringify(analyticsData)); >);
  • Отсылается POST-запрос.
  • Мы можем послать не только строку, но так же формы и другие форматы, как описано в главе Fetch, но обычно это строковый объект.
  • Размер данных ограничен 64 Кб.

К тому моменту, как sendBeacon завершится, браузер наверняка уже покинет страницу, так что возможности обработать ответ сервера не будет (для статистики он обычно пустой).

Для таких запросов с закрывающейся страницей есть специальный флаг keepalive в методе fetch для общих сетевых запросов. Вы можете найти больше информации в главе Fetch API.

Если мы хотим отменить переход на другую страницу, то здесь мы этого сделать не сможем. Но сможем в другом месте – в событии onbeforeunload .

window.onbeforeunload

Если посетитель собирается уйти со страницы или закрыть окно, обработчик beforeunload попросит дополнительное подтверждение.

Если мы отменим это событие, то браузер спросит посетителя, уверен ли он.

Вы можете попробовать это, запустив следующий код и затем перезагрузив страницу:

window.onbeforeunload = function() < return false; >;

По историческим причинам возврат непустой строки так же считается отменой события. Когда-то браузеры использовали её в качестве сообщения, но, как указывает современная спецификация, они не должны этого делать.

window.onbeforeunload = function() < return "Есть несохранённые изменения. Всё равно уходим?"; >;

Поведение было изменено, потому что некоторые веб-разработчики злоупотребляли этим обработчиком события, показывая вводящие в заблуждение и надоедливые сообщения. Так что, прямо сейчас старые браузеры всё ещё могут показывать строку как сообщение, но в остальных – нет возможности настроить показ сообщения пользователям.

readyState

Что произойдёт, если мы установим обработчик DOMContentLoaded после того, как документ загрузился?

Естественно, он никогда не запустится.

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

Свойство document.readyState показывает нам текущее состояние загрузки.

Есть три возможных значения:

  • «loading» – документ загружается.
  • «interactive» – документ был полностью прочитан.
  • «complete» – документ был полностью прочитан и все ресурсы (такие как изображения) были тоже загружены.

Так что мы можем проверить document.readyState и, либо установить обработчик, либо, если документ готов, выполнить код сразу же.

Например, вот так:

function work() < /*. */ >if (document.readyState == 'loading') < // ещё загружается, ждём события document.addEventListener('DOMContentLoaded', work); >else < // DOM готов! work(); >

Также есть событие readystatechange , которое генерируется при изменении состояния, так что мы можем вывести все эти состояния таким образом:

// текущее состояние console.log(document.readyState); // вывести изменения состояния document.addEventListener('readystatechange', () => console.log(document.readyState));

Событие readystatechange – альтернативный вариант отслеживания состояния загрузки документа, который появился очень давно. На сегодняшний день он используется редко.

Для полноты картины давайте посмотрим на весь поток событий:

Здесь документ с , и обработчиками, которые логируют события:

   log('img onload'); 

Рабочий пример есть в песочнице.

  1. [1] начальный readyState:loading
  2. [2] readyState:interactive
  3. [2] DOMContentLoaded
  4. [3] iframe onload
  5. [4] img onload
  6. [4] readyState:complete
  7. [4] window onload

Цифры в квадратных скобках обозначают примерное время события. События, отмеченные одинаковой цифрой, произойдут примерно в одно и то же время (± несколько миллисекунд).

  • document.readyState станет interactive прямо перед DOMContentLoaded . Эти две вещи, на самом деле, обозначают одно и то же.
  • document.readyState станет complete , когда все ресурсы ( iframe и img ) загрузятся. Здесь мы видим, что это произойдёт примерно в одно время с img.onload ( img последний ресурс) и window.onload . Переключение на состояние complete означает то же самое, что и window.onload . Разница заключается в том, что window.onload всегда срабатывает после всех load других обработчиков.

Итого

События загрузки страницы:

  • DOMContentLoaded генерируется на document , когда DOM готов. Мы можем применить JavaScript к элементам на данном этапе.
    • Скрипты, вроде или блокируют DOMContentLoaded, браузер ждёт, пока они выполнятся.
    • Изображения и другие ресурсы тоже всё ещё могут продолжать загружаться.
    • loading – документ грузится.
    • interactive – документ прочитан, происходит примерно в то же время, что и DOMContentLoaded , но до него.
    • complete – документ и ресурсы загружены, происходит примерно в то же время, что и window.onload , но до него.

    Редактирование отдельного элемента на JavaScript

    Сейчас мы с вами научимся редактировать тексты элементов с помощью полей ввода. Начнем с простых вещей и будем постепенно усложнять.

    Итак, пусть у нас даны абзац и инпут, расположенные в одном родителе:

    Давайте сделаем так, чтобы по потери фокуса в инпуте его текст появлялся в абзаце:

    let elem = document.querySelector(‘#elem’); let input = document.querySelector(‘#input’); input.addEventListener(‘blur’, function() < elem.textContent = this.value; >);

    Давайте теперь сделаем так, чтобы по заходу на страницу в инпуте уже стоял текст абзаца. Таким образом мы с помощью инпута сможем редактировать текст, расположенный в абзаце.

    let elem = document.querySelector(‘#elem’); let input = document.querySelector(‘#input’); input.value = elem.textContent; // записываем в инпут текст абзаца input.addEventListener(‘blur’, function() < elem.textContent = this.value; >);

    Модифицируйте приведенный выше код так, чтобы текст абзаца менялся не по потери фокуса, а по мере ввода текста в инпут.

    Появление инпута

    Давайте теперь сделаем так, чтобы инпута изначально не было на странице, а он появлялся по клику на абзац. То есть наш начальный HTML будет выглядеть так:

    Для начала просто реализуем появление инпута, без редактирования:

    let elem = document.querySelector(‘#elem’); elem.addEventListener(‘click’, function() < let input = document.createElement('input'); input.value = elem.textContent; elem.parentElement.appendChild(input); >);

    А теперь давайте сделаем так, чтобы по потери фокуса в инпуте менялся текст абзаца:

    Наш код, однако, несовершенен, так как каждое нажатие на абзац будет приводить к появлению нового инпута.

    Для решения проблемы просто будем по потери фокуса удалять текущий инпут:

    Самостоятельно, не подсматривая в мой код, решите описанную задачу.

    Нет доступа к value

    в чем конкретно проблема? что за элемент inputText? почему решили, что не можете получить value? Куда нужно вставить строку el.innerHTML = inputT.value;, предыдущий код заработал как надо?

    21 июл 2016 в 12:06

    Я дополнил код и оформил его так что бы можно было его запустить. Проверьте так ли работает код как должен

    21 июл 2016 в 20:42

    3 ответа 3

    Сортировка: Сброс на вариант по умолчанию

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

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

    Отслеживать
    ответ дан 21 июл 2016 в 19:18
    81.3k 9 9 золотых знаков 78 78 серебряных знаков 136 136 бронзовых знаков
    Как вариант — использовать MutationObserver и обновлять переменную при изменении.
    – user207618
    11 авг 2016 в 18:09
    @Other, да, может быть, не видно какой-то особой выгоды от этого
    11 авг 2016 в 18:12

    Быть может. Затраты на наблюдателя могут быть больше, чем на геттер элемента. Но как экзотика — почему нет?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *