اگر یک جدول را از مرورگر کپی کنید، می‌توانید آن را مستقیم در Excel یا Google Sheets جای‌گذاری کنید و همه چیز مثل یک محدودهٔ واقعی کار خواهد کرد.

اما مسیر برعکس کار نمی‌کند: اگر داده‌ای را از Google Sheets کپی کنید و بخواهید در مرورگر بچسبانید، جدول به متن ساده تبدیل می‌شود و همهٔ ساختارش از بین می‌رود.

این موضوع گاهی مشکل‌ساز است، مخصوصاً وقتی:

یک فرم با چندین فیلد دارید که شبیه جدول است،

داده‌های شما در Google Sheets هستند،

و تنها هدف شما این است که بدون تایپ کردن تک‌تک خانه‌ها، همهٔ داده‌ها را وارد فرم کنید.

راه‌حل: شنود رویداد جای‌گذاری و توزیع خودکار داده‌ها

می‌توان با جاوااسکریپت یک listener روی رویداد paste اضافه کرد و داده‌های کپی‌شده را از کلیپ‌بورد خواند، سپس آن‌ها را به ترتیب در فیلدهای فرم قرار داد. نمونهٔ ساده:

document.addEventListener("paste", function (e) {
  // گرفتن داده‌ها از کلیپ‌بورد
  const text = e.clipboardData.getData("text");
  
  // تبدیل متن به آرایهٔ دو بعدی: سطرها و ستون‌ها
  const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

  // گرفتن همهٔ inputهای فرم
  const inputs = [...document.querySelectorAll("input")]; 
  let index = 0;

  // پر کردن inputها به ترتیب داده‌ها
  for (const row of rows) {
    for (const cell of row) {
      if (inputs[index]) {
        inputs[index].value = cell;
        index++;
      }
    }
  }

  // جلوگیری از رفتار پیش‌فرض مرورگر
  e.preventDefault();
});

نتیجهٔ کار

با این کد:

می‌توانید یک محدوده از Google Sheets را کپی کنید،

سپس با Ctrl+V در مرورگر بچسبانید،

و داده‌ها به‌صورت خودکار در فیلدهای فرم پخش می‌شوند، درست مانند کاری که Excel انجام می‌دهد.

به عبارتی، تجربهٔ کاربر مثل تجربهٔ Excel یا Sheets خواهد بود و نیازی به وارد کردن تک‌تک سلول‌ها نیست.

نمونه عملی

می‌توانید نمونهٔ آماده را اینجا مشاهده کنید:

🔗https://codepen.io/alinaki/pen/KwzvEeX
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

Perspective 4.0

مولفه تحلیل داده و تجسم داده با عملکرد بالا
(وب‌سایت رسمی: https://perspective-dev.github.io/)

در ابتدا توسط شرکت جی‌پی مورگان ساخته شده، این مولفه تجسم داده که با زبان ++C توسعه یافته و به WebAssembly کامپایل شده، برای مجموعه‌داده‌های بزرگ و جریانی در زمان واقعی بسیار مناسب است. در نسخه‌ی نمایشی صفحه‌ی اصلی، می‌توانید انواع تجسم را با سرعت تا ۱۰۰۰ تغییر در ثانیه آزمایش کنید.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript