Ng-Paste - Retrieving Data from Clipboard as a List or Array

Question

Ng-Paste - Retrieving Data from Clipboard as a List or Array

The Concept

Currently, we are in the process of developing an Angular 1.5.x app and are exploring ways to incorporate a feature that allows users to paste a single column of cells from an excel sheet or another spreadsheet (regardless of row count) into an input field.

Within our data table, there are inline inputs setup as follows:

The concept revolves around pasting data from a single column of a spreadsheet into one of the inputs, with each cell's value being assigned to the corresponding input in descending order. For instance, if a column with values [4.52, 6.235, 9.2301] is pasted into the top input containing 15.23, then 15.23 should transform into 4.52, 3.1234 into 6.235, and 3.1322 into 9.2301. We have figured out how to assign these variables to the inputs but require clipboardData in array format instead of one cohesive string.

The Issue at Hand

We have explored using the ng-paste directive along with the $event.clipboardData property, yet we can only access the data as a string. Although we possess a means of parsing the string, having the elements delivered as an array or list would reduce potential errors on our part when employing delimiters to segment the string.

Linked here is an active plunker showcasing our current efforts.

Below is a sample dataset for copying and pasting into the designated input:

Interestingly, when transferring a column from an excel sheet, it doesn't contain any separators between values. Splitting on the '\n' character works seamlessly when extracting data across multiple columns within a single row. Our aim is to enable users to copy from both horizontal rows and vertical columns; however, the challenge arises due to the lack of delineation when pasting a column from excel.

0.89663.91783.91773.91773.9178

These are the values copied from an excel/google sheet^, but arranging them in a singular column will suffice. Rest assured, the entered data will primarily derive from a spreadsheet source.

A Potential Resolution

Do you have any insights on extracting clipboard data formatted as an array?

javascript angularjs clipboarddata onpaste ng-paste

Answer 1

Answer №1

Here's the solution you need:

HTML:

<input ng-paste="performPaste($event)"><br />
<p>Display pasted input as array:</p>
<p ng-repeat="data in pasted track by $index">{{data}}</p>

JavaScript:

$scope.performPaste = function(event) {
    $scope.pasted = event.clipboardData.getData('text').split(" ").map(Number);
    console.log($scope.pasted);
}

See it in action: Live Demo

Answer 2

Here's the solution you need:

HTML:

<input ng-paste="performPaste($event)"><br />
<p>Display pasted input as array:</p>
<p ng-repeat="data in pasted track by $index">{{data}}</p>

JavaScript:

$scope.performPaste = function(event) {
    $scope.pasted = event.clipboardData.getData('text').split(" ").map(Number);
    console.log($scope.pasted);
}

See it in action: Live Demo

Answer 3

Answer №2

An innovative workaround may involve incorporating additional data rather than relying solely on current information. The revised body code would look like this:

<body ng-controller="MainCtrl">
  <input ng-paste="pasteFunction($event)">
  <input ng-repeat="t in test" ng-model="t"/>
</body>

The controller will need to be adjusted accordingly:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.obj = {};
  $scope.test = [111, 222, 333];
  $scope.pasteFunction = function(ev) {
    $scope.test = ev.clipboardData.getData('text').split(" ").map(Number);
  }
  // input this: 999 888 777
  });

Answer 4

An innovative workaround may involve incorporating additional data rather than relying solely on current information. The revised body code would look like this:

<body ng-controller="MainCtrl">
  <input ng-paste="pasteFunction($event)">
  <input ng-repeat="t in test" ng-model="t"/>
</body>

The controller will need to be adjusted accordingly:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.obj = {};
  $scope.test = [111, 222, 333];
  $scope.pasteFunction = function(ev) {
    $scope.test = ev.clipboardData.getData('text').split(" ").map(Number);
  }
  // input this: 999 888 777
  });

Ng-Paste - Retrieving Data from Clipboard as a List or Array

The Concept

The Issue at Hand

A Potential Resolution

Answer №1

Answer №2

Similar questions

Sending JSON data back to React in a file format

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

Extracting the value of an HTML element from a string variable in AngularJS

Scrolling text box utilizing Jquery

Styling the background of the endAdornment in a material-ui textfield using React

Executing a JavaScript function within MainPage.xaml.cs codebehind file in a Windows application

Retrieving information from mlab without needing to make a new request, for example, updating the front end without refreshing the page

Is it possible to pre-select a value in a PrimeVue Dropdown component?

What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

Encountering the issue of "Cannot read properties of undefined" while attempting to pass data to a prop

Initiate modal from sub-component

Is there a way to merge two arrays with a specific condition?

The collision function is currently not functioning properly, causing a hindrance in movement. There are no other codes restricting movement

Getting the Featured Image from a Post Link in Wordpress: A Step-by-Step Guide

JavaScript: Adjust DIV Width Based on Window Height

What is the best way to link multiple return statements in Node.js using ioredis?

Errors in Compiling Dependencies for d3.js Using Typescript

css problem with scaling in firefox

Preventing preventDefault() from firing in JQuery only when necessary