TGViewer
Будни разработчика Будни разработчика @htmlshit · 14.4K subscribers
Post #4120 1.69K
#фишка дня

Таблица до сих пор превосходит все попытки её имитировать по очень простой причине:
если скопировать её из браузера, она спокойно вставится в Excel или Google Sheets как нормальный диапазон.

Но вот обратное направление не работает. Скопировал диапазон из Sheets — а в браузере всё рассыпалось в текст, будто ничего и не было.

Иногда это мешает: есть форма с табличкой на сайте, есть данные в Google Sheets, и единственное желание — просто вставить их туда, не перепечатывая по ячейке. Чтобы привычный Ctrl+V вёл себя так же естественно, как в Excel.

Для таких случаев можно сделать маленькую, но удобную вещь — ловить событие вставки и парсить табличные данные из буфера, распределяя их по нужным полям:


document.addEventListener("paste", function (e) {
const text = e.clipboardData.getData("text");
const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

const inputs = [...document.querySelectorAll("input")];
let index = 0;

for (const row of rows) {
for (const cell of row) {
if (inputs[index]) {
inputs[index].value = cell;
index++;
}
}
}

e.preventDefault();
});


Так можно взять диапазон в Google Sheets, нажать Ctrl+V в браузере — и данные разложатся по ячейкам формы, словно это штатная функция.

Я пример забыл, а вы и молчите: https://codepen.io/alinaki/pen/KwzvEeX

#js #table #бородач
  • 👍 14
  • ❤ 1
More from @htmlshit
  1. Sep 29, 2026#инструмент дня Забайтил твиттер этим скриншотом с успехом аж на 55 тысяч просмотров. На с…
  2. Sep 29, 2026#заметка дня Позабытый формат В комментариях к свежему Subversion спор про Git и централиз…
  3. Sep 28, 2026#релиз дня Яндекс выложил в открытый доступ новую базовую модель Alice AI — AliceAI-Founda…
  4. Sep 28, 2026#библиотека дня Poimandres снова на коне: заваншотили (на самом деле нет) математическую б…
  5. Sep 25, 2026#фишка дня Вот такой короткий набор CSS правил позволит текстовому полю расти вместе со вв…
  6. Sep 25, 2026#статья дня Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересек…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →