customtextarea

This package provides extended functionality for the HTML5 TextArea form element.

Contents:

• Features
  • Maximum Line Validation
• Install
• Usage
• License

Features

Maximum Line Validation

This features provides a method of enforcing a maximum number of lines on a HTML5 TextArea. Why? Say you had a form with a text area, and this form was being converted into a printable format, like a PDF. The text may have to fit into a certain area on your PDF, what this allows you to do is to limit the user input to a specific number of rows so that your PDF structure is maintained.

Usage

To use this feature, include the package in the relevant JS/TS file:

import * as CustomTextArea from 'customtextarea';

Then set up your TextArea element, ensuring you set an id, rows and cols value:

<TextArea id='MyTextArea' rows="5" cols="85"></TextArea>

After that all you need to do is call the validateMaxLines(textAreaSelector) method upon page load.

pageLoadFunction() {
    CustomTextArea.validateMaxLines('#MyTextArea');
}

If you would prefer not to use the rows attribute as the max rows, just pass in an override value to the setup function.

CustomTextArea.validateMaxLines('#MyTextArea', 10);

And that's it! The method adds an eventListener to the DOM that "hijacks" the user input at the point where it would wrap above the maximum rows.

Install

npm install customtextarea

License

MIT