Allowing tabs in textareas - [Bob Novell's Nook on the Web]

Contents of My Nook on the Web

Home Page

JavaScript Documentation PDFs
(OBSOLETE

JavaScripter
Help
Change Log

Analog LOGFORMAT for MyDomain Sites

Replacement Tips For Radio Shack 64-2184 Soldering Station

How to to allow tabs to be used a <textarea>

Site Change Log

Email Me

About Me

The following are links to other sites. They will open in a new window or tab:

My Wife's Business Named Sew-lutions

Sugarcat Simon's Niche on the Web about Feline Diabetes

Online Etymological Dictionary

Web site tracking a "person" through thirty three companiess in 8 states

Bob Novell's Nook on the World Wide Web
How to allow the use of tabs in a textareaPage Last Update: June 17, 2016
Update: Created the page

This page provides demonstrations of a function I have written to allow the use of tab keys in <textarea> tags for text formatting.

The code is very loosely based upon code I found at http://www.phpdevtips.com/snippets/allow-tab-textarea/ The code, both HTML and JavaScript did not function as written, there were both coding errors and design errors. I have massively changed and added to that code such that perhaps 3 lines are the same as I found them - at least close to the way I found them. I think I actually made some change on every line of the code - and added many more than there in the original code.

Normal behavior when you press the tab key when the cursor is in a <textarea> is for the cursor to be moved to the next field on the page - input field, button, address bar, etc..

To allow the use of the tab keys for formatting in a <textarea> it is necessary to change the default behavior the tab key in a <textarea>

The JavaScript presented here is intended to be executed on the onload event for the page's <body> tag. It will create onkeydown event handler functions for all <textarea> tags which have class="tabs_in_textarea"

The function created will prevent the default action of the tab and instead insert "something" based upon how you code the function call on the <body> tag.

Below are two examples you can try out. Try them, put your cursor in the textarea and press the tab key

The examples are separate web pages in iframes. Per web page, you can only specify what is to be insert in place of the tab just once. You cannot, at least now, specify different characters to be inserted in different <textarea> tags.

Thus, to show you both examples, I had to code separate web pages and I'm displaying them here, above, in iframes.

The code, both HTML and JavaScript is fully commented and anyone reasonably knowledgeable of HTML and JavaScript should have no problems used the function on their own pages.

To implement this function:

Download the JavaScript file - click here with your right mouse button and select "Save As"
Include the .js file in your page with a <script> tag in the <head> section. Do not link to the file on this web site, I don't want you using my bandwidth and I might change the file name and your<script> tag won't work.
Put a call to the function on the page's <body> tag as the onload function. Read the comments in the JavaScript code for the valid values for the function's argument.
Code class="tabs_intextarea" on the textarea(s) in which you want to allow tabs. If you another class on the <textarea>, you can specify multiple classes by separating them with blanks within the quoted string value of the class= parameter.

Here is the JavaScript code

Here is the HTML for the example that inserts a tab control character ( \t) when the tab key is pressed.

Here is the HTML for the example that inserts 5 blanks when the tab key is pressed.

Note - You are free to use this but you must leave the copyright statements in the file, as they are, to provide just credit to me for creating these files and code.

SUPPORT -

NONE, nothing at all, Copy the files and use them if you want but you are on your own.