JavaScript and DOM textarea onblur issue.

Discussion in 'Javascript' started by jb5531, Apr 18, 2007.

  1. jb5531

    jb5531 Guest

    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!
     
    jb5531, Apr 18, 2007
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.