├── .editorconfig
├── .gitignore
├── .travis.yml
├── bower.json
├── demo
├── contenteditable.html
├── dropdown.html
├── editable.html
├── multiple.html
├── nested.html
└── non-editable.html
├── dist
└── select.js
├── karma.conf.js
├── package.json
├── readme.md
├── src
└── select.js
└── test
└── select.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 | # Change these settings to your own preference
9 | indent_style = space
10 | indent_size = 4
11 |
12 | # We recommend you to keep these unchanged
13 | end_of_line = lf
14 | charset = utf-8
15 | trim_trailing_whitespace = true
16 | insert_final_newline = true
17 |
18 | [*.md]
19 | trim_trailing_whitespace = false
20 |
21 | [{package.json,bower.json}]
22 | indent_size = 2
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - stable
4 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "select",
3 | "version": "1.1.0",
4 | "description": "Programmatically select the text of a HTML element",
5 | "license": "MIT",
6 | "main": "dist/select.js",
7 | "keywords": [
8 | "range",
9 | "select",
10 | "selecting",
11 | "selection"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/demo/contenteditable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | contenteditable
6 |
7 |
8 |
9 | Select
10 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio totam adipisci, saepe ad vero dignissimos laborum non eum eveniet aperiam, consequuntur repellendus architecto inventore iusto blanditiis quasi commodi voluptatum vitae!
11 |
12 |
13 |
14 |
15 |
16 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/demo/dropdown.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | dropdown
6 |
7 |
8 |
9 | Select
10 |
11 | Option 1
12 | Option 2
13 | Option 3
14 |
15 |
16 |
17 |
18 |
19 |
20 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/demo/editable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | editable
6 |
7 |
8 |
9 | Select
10 | multiple
6 |
7 |
8 |
9 | Select
10 | non-editable
6 |
7 |
8 |
9 | Select
10 |
11 |
Item 1
12 |
Item 2
13 |
14 | Item 3
15 | Item 4
16 | Item 5
17 |
18 |
non-editable
6 |
7 |
8 |
9 | Select
10 | Lorem ipsum
11 |
12 |
13 |
14 |
15 |
16 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/dist/select.js:
--------------------------------------------------------------------------------
1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.select = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o
29 | ```
30 |
31 | ```js
32 | var input = document.querySelector('input');
33 | var result = select(input);
34 | ```
35 |
36 | ### Browserify
37 |
38 | ```js
39 | var select = require('select');
40 | ```
41 |
42 | ```js
43 | var input = document.querySelector('input');
44 | var result = select(input);
45 | ```
46 |
47 | ## License
48 |
49 | [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
50 |
--------------------------------------------------------------------------------
/src/select.js:
--------------------------------------------------------------------------------
1 | function select(element) {
2 | var selectedText;
3 |
4 | if (element.nodeName === 'SELECT') {
5 | element.focus();
6 |
7 | selectedText = element.value;
8 | }
9 | else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
10 | var isReadOnly = element.hasAttribute('readonly');
11 |
12 | if (!isReadOnly) {
13 | element.setAttribute('readonly', '');
14 | }
15 |
16 | element.select();
17 | element.setSelectionRange(0, element.value.length);
18 |
19 | if (!isReadOnly) {
20 | element.removeAttribute('readonly');
21 | }
22 |
23 | selectedText = element.value;
24 | }
25 | else {
26 | if (element.hasAttribute('contenteditable')) {
27 | element.focus();
28 | }
29 |
30 | var selection = window.getSelection();
31 | var range = document.createRange();
32 |
33 | range.selectNodeContents(element);
34 | selection.removeAllRanges();
35 | selection.addRange(range);
36 |
37 | selectedText = selection.toString();
38 | }
39 |
40 | return selectedText;
41 | }
42 |
43 | module.exports = select;
44 |
--------------------------------------------------------------------------------
/test/select.js:
--------------------------------------------------------------------------------
1 | var select = require('../src/select');
2 |
3 | describe('select editable elements', function() {
4 | before(function() {
5 | global.input = document.createElement('input');
6 | global.input.value = 'lorem ipsum';
7 |
8 | global.textarea = document.createElement('textarea');
9 | global.textarea.value = 'lorem ipsum';
10 |
11 | document.body.appendChild(global.input);
12 | document.body.appendChild(global.textarea);
13 | });
14 |
15 | after(function() {
16 | document.body.innerHTML = '';
17 | });
18 |
19 | it('should return the selected text on input', function() {
20 | var result = select(global.input);
21 | assert.equal(result, global.input.value);
22 | });
23 |
24 | it('should return the selected text on textarea', function() {
25 | var result = select(global.textarea);
26 | assert.equal(result, global.textarea.value);
27 | });
28 | });
29 |
30 | describe('select non-editable element with no children', function() {
31 | before(function() {
32 | global.paragraph = document.createElement('p');
33 | global.paragraph.textContent = 'lorem ipsum';
34 |
35 | document.body.appendChild(global.paragraph);
36 | });
37 |
38 | after(function() {
39 | document.body.innerHTML = '';
40 | });
41 |
42 | it('should return the selected text', function() {
43 | var result = select(global.paragraph);
44 | assert.equal(result, global.paragraph.textContent);
45 | });
46 | });
47 |
48 | describe('select non-editable element with child node', function() {
49 | before(function() {
50 | global.li = document.createElement('li');
51 | global.li.textContent = 'lorem ipsum';
52 |
53 | global.ul = document.createElement('ul');
54 | global.ul.appendChild(global.li);
55 |
56 | document.body.appendChild(global.ul);
57 | });
58 |
59 | after(function() {
60 | document.body.innerHTML = '';
61 | });
62 |
63 | it('should return the selected text', function() {
64 | var result = select(global.ul);
65 | assert.equal(result, global.ul.textContent);
66 | });
67 | });
68 |
69 | describe('select non-editable svg element w/ multiple text children', function() {
70 | before(function() {
71 | global.text1 = document.createElement('text');
72 | global.text1.textContent = 'lorem ipsum';
73 |
74 | global.text2 = document.createElement('text');
75 | global.text2.textContent = 'dolor zet';
76 |
77 | global.svg = document.createElement('svg');
78 | global.svg.appendChild(global.text1);
79 | global.svg.appendChild(global.text2);
80 |
81 | document.body.appendChild(global.svg);
82 | });
83 |
84 | after(function() {
85 | document.body.innerHTML = '';
86 | });
87 |
88 | it('should return the selected text', function() {
89 | var result = select(global.svg);
90 | assert.equal(result, global.text1.textContent +
91 | global.text2.textContent);
92 | });
93 | });
94 |
--------------------------------------------------------------------------------