Hello everyone!
I am trying to implement some code for my website using JavaScript and
DOM. The issue I'm having is that I want to change the size of the
textarea on blur. This text area changes from an input box to a
textarea once the value length reaches a certain number, passed to the
function call.
I cannot seem to reference this textarea after it is dynamically made
in order to change it's size (I am attempting to collapse it onblur
and have it expand onfocus). Any help is greatly appreciated! The code
is below:
<script type="text/javascript">
<!--
function xff(theID, fieldStart, fieldLimit, fieldRows) {
var theObj = document.getElementById(theID);
var saved='';
var origSize = theObj.size;
var currSize;
var len = origSize;
var newTextArea;
theObj.onkeyup = function() {
if(theObj.value.length >= fieldStart && theObj.value.length <
fieldLimit) {
theObj.size = theObj.size+1;
}
if((fieldRows && fieldRows != "undefined") && theObj.value.length >=
fieldLimit) {
newTextArea = document.createElement("textarea");
newTextArea.setAttribute("cols", fieldLimit);
newTextArea.setAttribute("rows", fieldRows);
newTextArea.value = theObj.value;
newTextArea.setAttribute("name", theObj.getAttribute("name"));
theObj.parentNode.replaceChild(newTextArea, theObj);
newTextArea.setAttribute("id", theID);
newTextArea.focus();
}
}
theObj.onblur = function() {
if (theObj.value.length len) {
saved = theObj.value;
var trunc = theObj.value.substring(0, len) + '...';
theObj.value = trunc;
currSize = theObj.size;
}
theObj.size = origSize;
}
theObj.onfocus = function() {
if(saved != ''){
theObj.size = currSize;
}
theObj.value = saved;
}
//THIS IS WHAT I CAN'T GET WORKING!!!//
textareas=document.getElementById("theID");
textareas.onblur = function() {
textareas.setAttribute('cols', 3);
textareas.setAttribute('rows', 3);
}
}
-->
</script>
<script language="JavaScript" type="text/javascript">
This code is called in the HTML by, for example: xff("ff",10,30,10);
Thanks for reading and helping if you can!
