Web Tools Weekly Issue #20 (selectionStart/End, JS Utils)

Issue #20 (selectionStart/End, JS Utils)12/05/13

When using scripting to manipulate HTML forms, you're able to use the select() method to select text inside of a form input or textarea element when that element receives focus (and this happens automatically when tabbing to a field).

While the select() method (and the select event) can be useful for knowing when text is selected, you also have the option to use the selectionStart and selectionEnd properties to find out exactly what text has been selected.

Here is how that might look:

var txtname = document.getElementById('txtname');
var output = document.getElementById('output');

function getSelectedText(txt) {
  return txt.value.substring(
               txt.selectionStart, txt.selectionEnd
         );
}

txtname.onselect = function () {
  output.innerHTML = getSelectedText(txtname);
};

And here is a demo. Notice when you select a portion of the text in the input, the selected text is displayed below the input. As written, this version doesn't seem to work if the user tabs into the box, but that could be corrected with a few tweaks.

The selectionStart and selectionEnd properties return zero-based numbers indicating where in the text the selection begins and ends. In the code above, inside the getSelectedText() function, I'm using the substring() method, which requires zero-based indicators for its arguments, so those work well together.

In my testing, these two properties worked in Chrome, Firefox, and IE11. According to Nicholas Zakas' book Professional JavaScript for Web Developers, these properties were created by Mozilla, so I don't believe they have support in older versions of IE, and Zakas mentions a workaround for old IE. Here is a demo with the old IE workaround (untested).

More info on these in the WHATWG spec.

Now on to this week's tools!

JavaScript Utilities and Mini Libraries

TOMODOkorz
"Allows you to make cross-origin requests to any domain. It will remove any cross-origin restrictions from your site once you add it to your site."

Duration.js
A simple library for dealing with durations and it works well with JavaScript's Date objects.

HiDPI Canvas Polyfill
"A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support."

trans
"The purpose of trans is to make it super easy to transform complex json objects."

over.js
"Elegant function overloading in JavaScript."

slidr.js
"A simple, lightweight javascript library for adding slide transitions to your page. No dependencies required."

Sly
"JavaScript library for one-directional scrolling with item based navigation support"

Packery
"A JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying 'it fills empty gaps.'"

negative-array
Negative array index support (e.g. array[-1]) using ES6 Proxy.

rar.js
"Pure-JavaScript RAR reader using AJAX, File API & local access."

Ifvisible.js
"Cross-browser & lightweight way to check if user is looking at the page or interacting with it."

LargeLocalStorage
"Problem: You need to store a large amount of key-value based data in IE, Chrome, Safari, AND Firefox." Helps you overcome storage limits and browser inconsistencies all in one fell swoop.

Flipload.js
"Flipping HTML elements to show a loading indicator easily." You'll have to check out the on-page demo to see exactly what this does.

Medium.js
An improved way to integrate the contenteditable attribute, inspired by Medium's editor interface.

Hopscotch
A script for adding visual product tour labels to your app, website, or service.

flyLabel.js
The latest UX/UI pattern, a script to make form labels float above the input after the user starts typing.

zip.js
"JavaScript library to zip and unzip files."

_select()
I like this one a lot. This script "extends the native JavaScript select() (which only works on input and textarea) so that it can be used to select the content of every DOM element you want."

please.js
"A Request/Response based wrapper around the PostMessage API that makes use of jQuery Promises."

Keys.js
"Easy keybindings for browser applications."

Signature Pad
This works really nicely: "HTML5 canvas based smooth signature drawing."

waitress.js
"A lean JS library that makes waiting on a collection of async calls less painful."

Apollo.js
"A <1KB standalone DOM class manipulation API for adding, removing, toggling and testing the existence of classes on an element."

Suggest Your Tool via Twitter

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.

3 CSS E-Books for $7!

To help Web Tools Weekly stay ad free, you can offer support:

Criticism? Corrections?

If you have any suggestions, corrections, or improvements, feel free to reply to this email.

Before I Go...

Check out (♭)ox. It's an online drum machine created with modern coding techniques including the HTML5 audio API. Lets you save your songs and has some keyboard shortcuts to help.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly