node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Expandable Input – A jQuery plugin

A jQuery plugin to use <{span|div|...} contenteditable> as expandable inputs.

Build Status Dependency Status devDependency Status

Download / Installation

You can download the latest JS & CSS code here:

Or install via npm

npm install --save expandable-input

The JS code can be required with

var jQuery = require('jquery')
var expandableInput = require('expandable-input')
// init 

The CSS code lives at node_modules/expandable-input/expandable-input.css


<!-- load jquery -->
<script src="jquery.js"></script>
<!-- load expandable-input assets -->
<link rel="stylesheet" type="text/css" href="expandable-input.css">
<script src="expandable-input.js"></script>
<!-- The behaviour is initialized on first interaction -->
  <span contenteditable name="name" placeholder="Joe Doe"></span> |
  <span contenteditable name="email" placeholder=""></span>
<p contenteditable placeholder="Write comment"></p>

To listen to changes on the inputs

$('[name=email]').on('input', function(event) {
  console.log('Current name is:', $(this).val())


  • $.fn.val() & $ are being patched to work with the contenteditable inputs
  • display: inline is currently not supported. It gets set to inline-block when initialized.
  • no html5 validation or password=type etc is not supported.

Local Setup

git clone
cd smartdate-input
npm install


You can start a local dev server with

npm start

Run tests with

npm test

While working on the tests, you can start Selenium / Chrome driver once, and then tests re-run on each save

npm run test:mocha:watch

Fine Print

The Expandable Input Plugin have been authored by Gregor Martynus, proud member of the Hoodie Community.

License: MIT