Как настроить таргетинг на текущий сфокусированный элемент из массива для вызова функции фокусировки?

Я пытаюсь создать серию редактируемых абзацев, которые получают фокус и становятся доступными для редактирования после того, как я нажму кнопку; после этого я ищу способ просто установить для его атрибута contenteditable значение false, когда абзац теряет фокус; Я просто не знаю и не нашел четкого способа настроить таргетинг на конкретный абзац, который ориентирован на запуск функции, когда я имею дело с массивом элементов.

Я уверен, что могут быть синтаксические ошибки или правила, которым я вообще не следую, я все еще практикую JavaScript, поэтому не знаю всех принципов работы языка. Любая помощь приветствуется

ЗАМЕТКА: Если есть способ также избежать использования HTML-атрибута onclick и вызывать функцию editInfo только из JavaScript, это тоже было бы здорово.

Это мой код на данный момент

function editInfo(paragraph) {
  var editableparagraph = document.getElementById(paragraph)

  editableparagraph.setAttribute('contenteditable', 'true')
  editableparagraph.focus();
}

var editableParagraph = document.getElementsByClassName('editable');
editableParagraph.onfocusout = function() {
  editableParagraph.setAttribute('contenteditable', 'false');
}
<h4>About Me <button class = "edit-btn" onclick = "editInfo('about-me-p')">Edit</button></h4>

<p contenteditable = "false" id = "about-me-p" class = "editable">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h4>About You<button class = "edit-btn" onclick = "editInfo('about-you-p')">Edit</button></h4>

<p contenteditable = "false" id = "about-you-p" class = "editable">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Вам нужна кнопка для каждой области, или вам подойдет просто щелчок по ней? Вы можете, например, добавить специальный класс в области, которые должны быть редактируемыми, а затем вы можете выполнить простой цикл для добавления прослушивателей событий ко всем этим элементам. Было бы нормально?

Blizzardengle 17.12.2018 20:47

Я бы предпочел кнопку, так как это часть спецификации дизайна, которую мне дали, поэтому я создаю ее так; Мне просто трудно найти лучший способ вызвать событие onfocusout, когда я имею дело с массивом; Я могу сделать это, указав позицию в массиве, например editableParagraph[1].setAttribute('contenteditable', 'false');, но, конечно, это не идеально

IvanS95 17.12.2018 20:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
240
1

Ответы 1

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

// Note you may not need to pass in the array like I did.
function addListeners( array ){

    // ADD CODE HERE FOR A FOR LOOP
    // LOOP THROUGH THE ARRAY OF ELEMENTS
    for(...){

    // For all major browsers, except IE 8 and earlier
    if ( array[x].addEventListener) {
        array[x].addEventListener("click", makeEditable);
        array[x].addEventListener("blur", removeEditable);

    // For IE 8 and earlier versions
    } else if (array[x].attachEvent) {
        array[x].attachEvent("onclick", makeEditable);
        array[x].attachEvent("onblur", removeEditable);
    }

    // END FOR LOOP
    }
}

// Call our function to add the listeners. Make sure the page is loaded first!
addListeners( arrayOfElements);

function makeEditable(){
   // ... Your code to make an area editable
}

function removeEditable(){
   // ... Your code to remove content editable
}

Если у вас есть только идентификаторы элементов, вы можете создать цикл for, который проходит через массив и выполняет document.getElementById( ... ) для каждого элемента в массиве, а затем сохраняет ссылку на элементы в массиве вместо идентификатора.

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

Надеюсь, это поможет вам двигаться в правильном направлении.

Спасибо за ответ, я думаю, что, возможно, я не очень хорошо объяснил ... См. Эти изображения: imgur.com/a/yIFJrTp Основная идея заключается в том, что абзац становится редактируемым, когда я нажимаю на кнопку, и снова становится недоступным для редактирования, если я нажимаю где-нибудь еще . Я действительно решил это, используя цикл forEach, чтобы получить все абзацы, и просто добавил функцию для каждого абзаца события onfocusout.

IvanS95 19.12.2018 16:44

Другие вопросы по теме