|
|
|
|
Issue #28 (setSelectionRange() and Learning Tools)01/30/14
In a previous issue I talked about the selectionStart and selectionEnd properties to help you recognize what range of text a user has selected inside of a text field.
A method related to those properties is setSelectionRange(). This method lets you define a range of text to select. Suppose we have the following HTML:
<input value="Web Tools Weekly" id="textField">
<button id="btn">Select Text</button>
|
This will display a text field with the words "Web Tools Weekly" in it. We can add some JavaScript so that when the user clicks the button, the word "Tools" will be selected:
var tf = document.getElementById('textField'),
btn = document.getElementById('btn');
btn.onclick = function () {
// change the numbers to select a different range
tf.focus();
tf.setSelectionRange(4, 9);
};
|
And here is a demo.
It's a very simple method that has two required parameters: selectionStart and selectionEnd. selectionStart is the position in the string to begin the selection (using zero-based indexing); selectionEnd is the position after which you want to end the selection. In this case, the word "Tools" starts at position "4" and ends at position "8", thus we use "4, 9" to target that word with the selection.
In Firefox, the focus() method is required prior to the setSelectionRange() call, but Chrome and IE11 don't seem to require this.
There is also a third optional parameter, selectionDirection. This defines the direction of the selection, which indicates if selectionStart should begin at the end of the string. It takes a value of "forward", "backward", or "none".
setSelectionRange() is a Mozilla creation and is now supported in all browsers, including IE9+. The third optional parameter is supported only in Chrome and Firefox. If you need IE6-8 support, you can try this shim, but that might be overkill.
More info on this method on MDN and WHATWG.
Now on to this week's learning tools!
Interactive Learning Tools
GuessHub
An almost silly little game that shows you a commit from a popular repository, then you have to guess which repo it's from.
140byt.es
"A tweet-sized, fork-to-play, community-curated collection of JavaScript."
Regex Golf
Try to write regular expressions that match the given list of string examples.
Unfolding the Box Model
A really nice interactive-ish presentation demonstrating 3D transforms in CSS.
learn-php.org
A beginner's learning app for PHP with live coding frames for doing the exercises.
Front End Development Quiz
Not easy! Consists of three sections, covering CSS, HTML, and JavaScript.
Learn Git Branching
"Designed to help beginners grasp the powerful concepts behind branching when working with git."
LearnStreet - JavaScript
An interactive JavaScript course. From the creators: "We are working on building the best online, interactive platform to help teach and learn essential coding skills of today and the future."
Screencast Series and Courses
Mac OS X Productivity Tips for Developers
From O'Reilly, over four hours of video. The link includes a discount code, but I don't know how long the discount is available for.
Laracasts
Jeffrey Way's screencast series covering the PHP framework Laravel.
Discover DevTools
A free CodeSchool course covering Chrome's developer tools.
Free Tuts+ Courses
All of the free courses available through Tuts+.
Interactive video Intro to Flexbox
A neat, interactive video course that introduces CSS's Flexible Box Layout Module.
jQuery Succinctly
A Nettuts+ "session" based on Cody Lindley's book of the same name "to express, in short-order, the concepts essential to intermediate and advanced jQuery development."
Knockout.js Video Series
14 video lessons stepping through how to build a simple photo app with Knockout.js.
Introduction to Web Accessibility
"An online course that introduces tools and techniques for web developers to easily ensure that websites are more accessible to users who are blind or have low vision."
Books
Ruby on Rails Explained for Front-End Developers
"Ruby on Rails is awesome, but overwhelming when you simply want to contribute your mastery of HTML, CSS, and Javascript to a rails app. Read this book to learn what you need to know to contribute alongside your ruby teammates."
Conquering the Command Line
"Unix and Linux Commands for Developers."
Learn.js
"A collection of LEGO guides. The goal: a fun way to learn javascript."
Mature Optimization Handbook
By Carlos Beno: "I spent a good chunk of the past year working on an internal training class and a short book about performance measurement and optimization."
Don't Make Me Think, Revisited
Steve Krug has finally published a much-needed update to his web usability classic.
A Tweet For Thought
From the Chrome Dev Relations Team, a cool tip to find elements in the Chrome dev tools.
Suggest Your Tool / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Automating Front-end Workflow by Addy Osmani is probably the best slide deck you'll see on this subject. From his keynote at FOWA 2013.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
