Как направить текущий фокусированный элемент из массива на функцию фокуса? - PullRequest
0 голосов
/ 17 декабря 2018

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

Я уверен, что могут быть синтаксические ошибки или правила, которые я вообще не соблюдаю, я все еще практикую 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>

1 Ответ

0 голосов
/ 19 декабря 2018

Исходя из того, что вы уже поделились, звучит так, как будто у вас уже есть все редактируемые области со страницы внутри массива.Исходя из вашего комментария, кажется, что это массив со ссылками на фактические 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 прослушиватель событий в то же время, когда вы сделали область редактируемой, чтобы она знала, что отключается сама, когда пользователь покидает ее.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...