В последнее время у меня возникла эта проблема, и я не мог найти ответ ни здесь, ни в Google, поэтому решил, что с таким же успехом могу спросить один раз. Тем не менее, я заранее прошу прощения, если я ошибся в этом вопросе, так как я действительно могу точно определить, где моя проблема. Кроме того, я собираюсь много говорить о PouchDB и его учебнике не потому, что это проблема, а потому, что он дает много контекста тому, что я делаю.
Несколько недель назад я наткнулся на PouchDB и обнаружил, что его функции - именно то, что мне нужно для моих проектов баз данных, я реализовал его учебник ( список задач ) с небольшими проблемами и решил следующий шаг было бы немного поработать с ним в качестве основы для будущего, гипотетического, реального проекта. Мои знания о Javascript очень просты, но я мог сделать форму или сетку / список, так что я подумал, что это будет не так сложно.
Моя самая первая идея состояла в том, чтобы вместо списка задач, это мог быть список с именами людей! Просто в качестве предлога иметь два (и, возможно, несколько) поля ввода вместо того, которое используется в примере кода. В указанном примере используется очень простой интерфейс, чтобы отредактировать одну из задач, пользователь должен дважды щелкнуть элемент в списке, и появляется поле ввода (приложение автоматически фокусируется на указанном поле), где пользователь может переписать или удалить элемент, простое нажатие клавиши ввода или удаление фокуса с поля вызывает событие размытия, которое сохраняет его изменения. Самая первая странная проблема, с которой я столкнулся, заключалась в том, что при добавлении второго редактируемого элемента я не мог использовать тот же класс CSS, что и первый.
function nameDblClicked(todo) {
var div = document.getElementById('li_' + todo._id);
var inputEditName = document.getElementById('input_' + todo._id);
div.className = 'editing';
inputEditName.focus();
}
function lastDblClicked(todo) {
var div = document.getElementById('li_' + todo._id);
var inputEditLast = document.getElementById('input_' + todo._id);
div.className = 'editing';
inputEditLast.focus();
}
//a few lines ahead on the code we make the list
var inputEditName = document.createElement('input');
inputEditName.id = 'input_' + todo._id;
inputEditName.className = 'edit';
inputEditName.value = todo.name;
inputEditName.addEventListener('keypress', nameKeyPressed.bind(this, todo));
inputEditName.addEventListener('blur', todoBlurred.bind(this, todo));
var inputEditLast = document.createElement('input');
inputEditLast.id = 'input_' + todo._id;
inputEditLast.className = 'edit';
inputEditLast.value = todo.lastname;
inputEditLast.addEventListener('keypress', lastKeyPressed.bind(this, todo));
inputEditLast.addEventListener('blur', todoBlurred2.bind(this, todo));
var li = document.createElement('li');
li.id = 'li_' + todo._id;
li.appendChild(divDisplay);
li.appendChild(inputEditName);
li.appendChild(inputEditLast);
Это не сработало, после небольшого исследования я обнаружил, что по какой-то причине использование одного и того же класса css (еще раз, извините, если я неправильно использовал тег) для обоих входов, позволит мне редактировать только первый, поэтому Я использовал немного ducktape и только что сделал клоны классов в файле css: edit2 и edit2. Этот действительно работал! (даже если мне не совсем нравится то, как я обошел его, я подумал, что буду беспокоиться об этом позже) Я мог бы отредактировать оба поля очень хорошо, но теперь я наконец-то решаю проблему. По какой-то причине событие фокуса на поле фамилии больше не работает. Эффект размытия тоже не работает!
Я пытался провести собственное исследование, я узнал о tabindex и о том, как такая вещь может влиять на подобные вещи, но добавление его в поле фамилии ничего не сделало. Я узнал об установленных тайм-аутах и о том, как по какой-то причине браузерам могут потребоваться несколько миллисекунд для правильной активации событий, которые тоже не сработали (я пробовал с очень большими таймерами просто проверить, и таймер работает, но фокус событие по-прежнему не срабатывает). Я узнал о том, как несколько браузеров могут по-разному делать вещи, и как некоторые могут не обладать всеми функциями, которые я использую, но я использую Chrome (так как планирую что-нибудь придумать, работая на телефонах Android), поэтому я решил, что это не будет проблемой, я могу ошибаться, но я надеюсь, что это не так. Я также пытался иметь несколько классов «input», так как наличие отдельного класса редактирования вызывало у меня проблемы, но этот, казалось, вызывал проблему другого типа (теперь я вообще не мог получить доступ или отредактировать поле фамилии).
Так что я почесал голову в течение последних нескольких дней, кроме использования других классов css для двух входных данных, я не могу сказать разницу между полями имени и фамилии и почему события будут работать на одном поле, а не в другом. Это ошибка моей (по общему признанию, плохой) попытки скопировать / вставить Javascript? Разрешено ли новым классам CSS иметь эти события, если я не укажу это как-нибудь? Я делаю ошибку, используя просто старый Javascript вместо JQuery (мои поиски в Google сказали мне, что многие люди, которые сталкивались с подобными проблемами, используют позже)?