DarkKnight
03-10-2005, 03:49 AM
Hello, I have a problem I hope someone can help with ... I need a form where a user can enter data into a textarea and then click a button to create a new textarea beneath that if they have more subjects to enter. For neatness sake and numerous other reasons, I dont want scrollbars in the textareas - I want the textarea to be just 1 row tall but automatically resize to fit the text entered. Now I have found code to create the new fields and that works fine. I also have found code to do the resize and that works fine also. But I am trying to put them together and I can't get it to work. I am trying to create the textarea and call the resize function using the OnFocus and OnBlur methods. These work fine if coded direct into a textarea tag but I cannot get them working the way I need at all. I have been trying tons of stuff over the past few days and looking at tons of webpages but no luck so I thought I would see if anyone here could help. I am using IE6 and this only needs to work on IE as it is for internal use so support for netscape and all other browsers isnt needed.
Below code is what Ive stripped out - The bare bones to try and do what I need ... Hope someone can help with this as I hardly have any hair left ... Many Thanks ...
<HTML><HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
var MIN_ROWS = 1 ;
var MAX_ROWS = 999 ;
var MIN_COLS = 80 ;
var MAX_COLS = 80 ;
function changeTextAreaLength ( e ) {
var txtLength = e.value.length;
alert(txtLength);
var numRows = 0 ;
var arrNewLines = e.value.split("\n");
for(var i=0; i<=arrNewLines.length-1; i++){
numRows++;
if(arrNewLines[i].length > MAX_COLS-5) {
numRows += Math.floor(arrNewLines[i].length/MAX_COLS)
}
}
if(txtLength == 0){
e.cols = MIN_COLS ;
e.rows = MIN_ROWS ;
} else {
if(numRows <= 1) {
e.cols = (txtLength % MAX_COLS) + 1 >= MIN_COLS ? ((txtLength % MAX_COLS) + 1) : MIN_COLS ;
}else{
e.cols = MAX_COLS ;
e.rows = numRows > MAX_ROWS ? MAX_ROWS : numRows ;
}
}
}
</SCRIPT>
<sCRIPT TYPE="text/javascript" LANGUAGE="javascript">
function addField (form, fieldName, fieldValue) {
var txt1 = document.createElement("textarea");
txt1.setAttribute("name",fieldName);
txt1.setAttribute("value",fieldValue);
txt1.setAttribute("cols","80");
txt1.setAttribute("rows","1");
txt1.setAttribute(onFocus,"myInterval = window.setInterval('changeTextAreaLength(document.CreateTurnover."+fieldName+")', 1) ;");
txt1.setAttribute(onBlur,"window.clearInterval(myInterval) ;");
document.getElementById('formName').appendChild(txt1);
// txt1.onFocus = function (){"myInterval = window.setInterval('changeTextAreaLength(document.formName.field1)', 1) ;"}
// txt1.onBlur = function (){"window.clearInterval(myInterval) ;" }
}
</SCRIPT>
<SCRIPT>
var i = 0;
</SCRIPT>
</HEAD>
<BODY><FORM NAME="formName">
<input type="hidden" name="fieldType" value="textarea">
FieldName = <INPUT TYPE="text" NAME="fieldName" VALUE="field0" SIZE="10">
<INPUT TYPE="button" VALUE="add field"
ONCLICK="this.form.fieldName.value = 'field' + ++i;
addField(this.form, this.form.fieldName.value,i);" ><br>
</FORM>
</BODY>
</HTML>
Below code is what Ive stripped out - The bare bones to try and do what I need ... Hope someone can help with this as I hardly have any hair left ... Many Thanks ...
<HTML><HEAD>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
var MIN_ROWS = 1 ;
var MAX_ROWS = 999 ;
var MIN_COLS = 80 ;
var MAX_COLS = 80 ;
function changeTextAreaLength ( e ) {
var txtLength = e.value.length;
alert(txtLength);
var numRows = 0 ;
var arrNewLines = e.value.split("\n");
for(var i=0; i<=arrNewLines.length-1; i++){
numRows++;
if(arrNewLines[i].length > MAX_COLS-5) {
numRows += Math.floor(arrNewLines[i].length/MAX_COLS)
}
}
if(txtLength == 0){
e.cols = MIN_COLS ;
e.rows = MIN_ROWS ;
} else {
if(numRows <= 1) {
e.cols = (txtLength % MAX_COLS) + 1 >= MIN_COLS ? ((txtLength % MAX_COLS) + 1) : MIN_COLS ;
}else{
e.cols = MAX_COLS ;
e.rows = numRows > MAX_ROWS ? MAX_ROWS : numRows ;
}
}
}
</SCRIPT>
<sCRIPT TYPE="text/javascript" LANGUAGE="javascript">
function addField (form, fieldName, fieldValue) {
var txt1 = document.createElement("textarea");
txt1.setAttribute("name",fieldName);
txt1.setAttribute("value",fieldValue);
txt1.setAttribute("cols","80");
txt1.setAttribute("rows","1");
txt1.setAttribute(onFocus,"myInterval = window.setInterval('changeTextAreaLength(document.CreateTurnover."+fieldName+")', 1) ;");
txt1.setAttribute(onBlur,"window.clearInterval(myInterval) ;");
document.getElementById('formName').appendChild(txt1);
// txt1.onFocus = function (){"myInterval = window.setInterval('changeTextAreaLength(document.formName.field1)', 1) ;"}
// txt1.onBlur = function (){"window.clearInterval(myInterval) ;" }
}
</SCRIPT>
<SCRIPT>
var i = 0;
</SCRIPT>
</HEAD>
<BODY><FORM NAME="formName">
<input type="hidden" name="fieldType" value="textarea">
FieldName = <INPUT TYPE="text" NAME="fieldName" VALUE="field0" SIZE="10">
<INPUT TYPE="button" VALUE="add field"
ONCLICK="this.form.fieldName.value = 'field' + ++i;
addField(this.form, this.form.fieldName.value,i);" ><br>
</FORM>
</BODY>
</HTML>