The Next Generation of Front-Side

Package Info

2.83 KB (gzipped)
forms, textarea
Nikolay Nemshilov
CDN Links


Osom-Area is custom textarea wrapper for, features:

Usage Principles

Hook up the module through the interfaces and instantiate the OsomArea class

<textarea id="my-area"></textarea>
<script type="text/javascript">
  Lovely(['osom-area-1.0.0'], function(OsomArea) {
    var area = new OsomArea('#my-area', {options: ...});

The first parameter can be either a css rule, a raw dom HTMLTextArea object or a dom.Input instance.

API Reference

The OsomArea class is inherited from the dom.Input class and has all the same methods.

Additionally it has a shortcut method to work with the selections, called #select'some text'); // select a matching piece of text, 22);       // select a range; // -> returns the current selection range

Also every OsomArea instances has a property called selection with the following API

area.selection.offsets();         // returns the current selection offsets
area.selection.offsets(1,22);     // sets current selection offsets

area.selection.text();            // returns currently selected text
area.selection.text('some text'); // selects matching text in the textarea

area.selection.position();        // returns absolute position of the cursor in the document;            // saves the current selection range
area.selection.restore();         // restores previously saved selection range



OsomArea instances have additional method called #autcoplete which can take two types of parameters, a callback function where you can make async calls to the server or an Array of options, so you can hook up Ajax autocompleter kinda like that

Lovely(['osom-area', 'ajax'], function(OsomArea, Ajax) {
  var input = new OsomArea();

  input.autocomplete(function(last_word) {
    Ajax.get('/some-url.json?q='+ last_word, {
      success: function() {

Text Highlighting

OsomArea instances have method called #paint which allows you to highlight certain pieces of text

var input = new OsomArea()

input.paint('Nikolay'); // will highlight every 'Nikolay' entry with default yellow color
input.paint(/nikolay/i, 'pink'); // will hilight everything that matches the re with the pink color
input.paint(0, 10, 'lightblue'); // will paint a piece of text at the certain position

NOTE: this feature is a bit of a dirty hack. Textareas themselves don't support the feature, so there is a certain lag with the highlighting response when the user types in something in the textarea

Copyright And License

This project is released under the terms of the MIT license

Copyright (C) 2012 Nikolay Nemshilov