// ****** Copyright 2016, Bob Novell, www.bobnovell.com
// ****** You may use the code on your own pages but you must leave all of the comments, including the copyright statement, in place.
// The following is code executed during the page load to create a getElementsByClassName function if the browser doesn't have one
// OR if you happend to include this in another .js file (your own or from somewhere else) which does the same processing.
// This code will find that a getElementsByClassName already exists and will not create one.
// Firefox and IE 10 have document.getElementsByClassName functions, I'm not sure about other versions of IE. Chrome doesn't
// have the function. This code will create a function which will do the same thing as the built-in versions.
if (document.getElementsByClassName == undefined) { // does the brower have a built-in document.getElementsByClassName?
document.getElementsByClassName = function(cl) { // No. We will create one
var retnode = []; // Initialize return value to an empty array
var myclass = new RegExp('\\b'+cl+'\\b'); // Create regular expression to search to use to search for the classname
var elem = this.getElementsByTagName('*'); // Get an array containing all of the elements on the page
var i; // Define the counter variable for the for loop
for (i = 0; i < elem.length; i++) { // Loop through the elements
var classes = elem[i].className; // Get the class name(s) for the element
if (myclass.test(classes)) { // Use regulary expression to see if the class name is present
retnode.push(elem[i]); // If the class name is found, add it to the return value array
} // end of if statement
} // end of for loop
return retnode; // Return the array - either empty or with an element for each
// element with the specified class
};
}
// createTextareaKeyDownFunction -
// This function, called on body load, creates keydown handlers for all <textarea> tags which have class="tabta" so that the tab key
// can be used for formatting, not to go to the next field on a web page (when in a textarea) It intercepts the tab keydown and inserts
// something else, based upon what the user coded in the onload functdion call. If you use this, leave these comments in place, as well
// as the next one to give me a little credit. You might also wait until I get it cleaned -
// I'll make it available at www.bobonovell.com/textareatabkey.shmtl
// in a couple of days - it is not Thursfday, June 16, 2016 at 1758 CDT
//
// That web page does not exist right now. Check back late Saturday, 6/18/2016
//
// The argument for the function can:
// omitted or '' or null - the function will insert 5 blanks each time the tab key is pressed
// a number (it will be treated as an integer) - the function will insert the specified number blanks when the tab key is pressed
// The following are examples of how you code the <body> tag and <textarea> tag
// <body onload="createTextareaKeyDownFunction()"> <!-- without an argument, the function will insert a \t -->
// <textarea class="tabs_in_textarea"> <!-- putting the class=tabs_in_textarea" on the textarea will cause a function to be created for it -->
// You can code additional classes on the textarea, just seperate them with blanks.
// NOTE - My testing shows that a tab character in a textarea creates a space whose width is the same as 7 blanks. This may not hold true, so if you
// want a fixed space, pass the number of the blanks you want. Example, if you want 5 spaces, code it as createTextareaKeyDownFunction(5)
function createTextareaKeyDownFunction(insertChar) { // Function to allow use of tabs in textarea for formatting
var insert, selectionStartIncrement, insertValue, i, keypressed; // define variables
if ((insertChar == undefined) || (insertChar === null) || (insertChar === "")) { // Was the arguement passed?
insert = "\t"; // No. Default is to insert a \tab control char
selectionStartIncrement = 1; // set insertion point adjustment to 1
}
else {
if (isNaN(insertChar) === true) { // is the argument value NaN (Not a Number)?
window.console.log("createTextareaKeyDownFunction: value passed: '" + insertChar + "' is not numeric. Processing aborted");
if ((new Error).stack !== undefined) { // this is to check of supported by browser - FF and GC yes, IE 10 No
window.alert("createTextareaKeyDownFunction: value passed: " + insertChar + " is not numeric. Processing aborted" +
"\n\nCheck browser console for more information");
window.console.log("Eror Stack Information: " + (new Error).stack);
}
else {
window.alert("createTextareaKeyDownFunction: value passed: " + insertChar + " is not numeric. Processing aborted");
}
return;
}
insert = ""; // at this point we have found that the value in insertChar is numeric
insertValue = parseInt(insertChar, 10); // and now we use parseInt to get a simply integeer value from it
for (i = 0; i < insertValue; i++) { // We now look through insertValue times and make a string of spaces
insert = insert + " "; // Add a blank to the string
}
selectionStartIncrement = insertValue; // and we set the selection point increment to the length of the string.
}
var textareas = document.getElementsByClassName('tabs_in_textarea'); // create an array containing the ids of all textarea elements
var count = textareas.length; // save number of elements in array
for(i=0; i<count; i++){ // loop through the array and
textareas[i].onkeydown = function(theEvent){ // create a onkeypress event function (handler) for each textarea
if (theEvent.keyCode) { // Does the keyCode property exist?
keypressed = theEvent.keyCode; // Yes, save its value
}
else {
if (theEvent.charCode) { // Does the charCode property exist?
keypressed = theEvent.charCode; // Yes, save its value
}
else {
if (theEvent.key) { // Does the key parameter exist?
keypressed = theEvent.which; // Yes, save the value
}
else {
if (theEvent.which) { // Does the which parameter exist?
keypressed = theEvent.which; // Yes, save the value
}
else {
return; // if we fall through to here, we don't know the correct attribute for the
// being used to get the key code for the key pressed. So we just return
}
}
}
}
// The following code is based on some code I found at http://www.phpdevtips.com/snippets/allow-tab-textarea/
// The entire thing, as shown there, did not work as it was presented and I
// decided to make it work and make a general use function out of it.
if (keypressed == 9) { // was the tab key pressed?
//theEvent.preventDefault(); // Yes. prevent the default event action
var selectionStart = this.selectionStart; // save the original selectionStart index
// Insert a tab character between the current
this.value = this.value.substring(0,this.selectionStart) + insert + this.value.substring(this.selectionEnd);
// position the selectionEnd to the original selectionStart + plus the length of the string that was inserted.
this.selectionEnd = selectionStart + selectionStartIncrement;
// depedning on browser, we prevent the default action for the tab key thusly:
theEvent.preventDefault ? theEvent.preventDefault() : (theEvent.returnValue = false);
}
};
}
}