https://github.com/kathan/pasteable

Paste text into any HTML element.
https://github.com/kathan/pasteable

Last synced: about 1 year ago
JSON representation

Paste text into any HTML element.

• Host: GitHub
• URL: https://github.com/kathan/pasteable
• Owner: kathan
• Created: 2016-04-12T21:02:03.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2021-02-09T21:04:22.000Z (over 5 years ago)
• Last Synced: 2025-02-24T12:15:17.914Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 90.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# pasteable

Pasteable is a dependency free library that will allow you to paste text into any HTML element.

[Try it!](https://codepen.io/kathan-the-typescripter/pen/yLVaeMb)

## Pasteable Elements Can Receive Focus.

Click on the text input and it receives the focus...

![Ordinary Text Input](https://raw.githubusercontent.com/kathan/pasteable/master/img/ordinary_text_input.png)

...then click on the element using pasteable and it receives the focus.

![Div using pasteable](https://raw.githubusercontent.com/kathan/pasteable/master/img/div_using_pasteable.png)

## Example

In the "test" folder there is an Simple Grid Example using Angular.

Click..

![Click and paste](https://raw.githubusercontent.com/kathan/pasteable/master/img/click_and_paste.png)

...and paste!

![Click and paste](https://raw.githubusercontent.com/kathan/pasteable/master/img/pasted_data.png)

### HTML

```html

  

    

    

    

    

  

  

    
Simple Grid Example

    
Click and Paste Tab-Delimited Text Here

      

      

        

          {{col}}

        

      

    

  


```

### Javascript

```javascript

var PasteApp = angular.module("PasteApp",[]);

PasteApp.controller('PasteCtrl', function ($scope, $http, $rootScope){

  $scope.grid_data = [];

  /************************************

   * Initialize your pasteable element

   ************************************/

  var s = pasteable({selectElement:'#my_element'});

  s.addEventListener('paste', function(e){

    /************************************

     * Parse the pasted data into a multi-

     * dimensional array and allow Angular

     * template to render it into a grid.

     ************************************/

    var rows = e.detail.split(/\n/);

    for(var r in rows){

      var columns = rows[r].split(/\t/);

      $scope.grid_data.push(columns);

    }

    $scope.$apply();

  });

});

```