Завдання - зробити максимально інтуїтивний інтерфейс для редагування. Я буду показувати на прикладі таблиці, але цю техніку можна пристосувати (змінивши пару рядків) для будь-яких блокових елементів, аж до body (хоча тут сенсу вже мало).
| 1 | 2 | 3 |
| 4 | 5 / td> | 6 / td> |
| 7 | 8 | 9 |
Я хочу щоб при кліці на елементі таблиці, з'являлося текстове поле з вмістом цього осередку. А при догляді фокуса з цього поля, його поточний зміст ставало вмістом осередки.
Круто. Воно навіть працює. Поля з'являються. Але не зникають. Для того, щоб вони зникали, потрібно вішати на подію blur ще один обробник. Причому робити це потрібно кожен раз, як ми генеруємо поле. Тому дописуємо.
Тепер все працює. Майже. Глюки починаються коли ми тикаємо по самому полю. Подія click для осередку теж спрацьовує. Тому ми отримуємо код поля редагування і вставляємо його в поле редагування. Така ось рекурсія. Щоб цього не відбувалося, потрібно відловлювати елемент, за яким відбувається клік.
Єдине, що мені хотілося б змінити - можливість збереження змін по Enter. Немає нічого простішого.
На зняття фокуса у нас вже є обробник, який робить що потрібно.
Ось що у нас вийшло. Тицкайте на осередки.