jquery-shiftenter, allows submit on 'Enter' in textareas and line breaks via 'Shift'+'Enter'

jquery-shiftenter is a jQuery plugin that makes it easy to allow submitting a form with textareas using a simple press on 'Enter'. Line breaks (newlines) in these input fields can then be achieved by pressing 'Shift+Enter' (alternatively 'Ctrl+Enter'). Additionally a hint is shown. Unit tests are provided.

Usage

To use this plug-in just add jquery.shiftenter.js and jquery.shiftenter.css to the <head> of your document:

<script type="text/javascript" src="jquery.shiftenter.js"></script>
<link href="jquery.shiftenter.css" rel="stylesheet" type="text/css" />

Then attach it to your textareas:

$(document).ready(function() {
    $('textarea').shiftenter();
});

Simple example

Click into the textarea and press Enter or Shift+Enter.

<form onsubmit="alert('submit'); return false;">
    <textarea rows="3" cols="30" style="width: 30em; height: 5em;">Click me</textarea>
</form>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('textarea').shiftenter();
});
</script>

More complex example with "autogrow" and "Ctrl+Enter"

The textarea automatically resizes on larger texts.

<form onsubmit="alert('submit'); return false;">
    <textarea rows="1" cols="30" style="width: 30em;">Click me</textarea>
</form>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('textarea').elastic().shiftenter({
        hint: 'Try Ctrl+Enter',
        metaKey: 'ctrl'
    });
});
</script>

Settings

$('textarea').shiftenter({
    focusClass: 'shiftenter',             /* CSS class used on focus */
    inactiveClass: 'shiftenterInactive',  /* CSS class used when no focus */
    hint: 'Shift+Enter for line break',   /* hint shown */
    metaKey: 'shift',                     /* meta key that triggers a line-break, allowed values: 'shift', 'ctrl' */
    pseudoPadding: '0 10'                 /* padding (bottom, right) of hint text */
});

You can adjust the style in jquery.shiftenter.css

Other things you might want to use along with jquery-shiftenter

elastic for growing and shrinking your content (see example above).
jquery-resize if you plan to do some special resizing on the textarea.

Changelog

0.0.4: Also allow CTRL instead of SHIFT, fix resize for Google Chrome
0.0.3: Change the way how the hint is positioned and improve resize handling.
0.0.2: React to textarea resizes and fix position of hint
0.0.1: Initial release

License & Contact

Licensed under the MIT-License

Report issues to http://github.com/cburgmer/jquery-shiftenter/issues

Contact me under Christoph Burgmer (cburgmer -[at]- ira [*dot*] uka [*dot*] de)