Я пытаюсь создать серию редактируемых абзацев, которые получают фокус и становятся доступными для редактирования после того, как я нажму кнопку; после этого я ищу способ просто установить для его атрибута 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>
Я бы предпочел кнопку, так как это часть спецификации дизайна, которую мне дали, поэтому я создаю ее так; Мне просто трудно найти лучший способ вызвать событие onfocusout
, когда я имею дело с массивом; Я могу сделать это, указав позицию в массиве, например editableParagraph[1].setAttribute('contenteditable', 'false');
, но, конечно, это не идеально
Судя по тому, чем вы уже поделились, похоже, что у вас уже есть все редактируемые области страницы внутри массива. Основываясь на вашем комментарии, кажется, что это массив со ссылками на фактический 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
.
Вам нужна кнопка для каждой области, или вам подойдет просто щелчок по ней? Вы можете, например, добавить специальный класс в области, которые должны быть редактируемыми, а затем вы можете выполнить простой цикл для добавления прослушивателей событий ко всем этим элементам. Было бы нормально?