Mimic Typing from a Textfield in a Textarea with Javascript

To mimic typing from a textfield in a textarea using Javascript:

<form name=fo>

<input type=text name=fi onKeyUp="javascript:fo.se.value=fo.fi.value">

<textarea name=se></textarea>

</form>


-We create a form and name it fo because we like short form names.
-We name our text field fi because we are lazy typers.
-We name our textarea se because we can.
-In our textfield fi, we use Javascript's built-in onKeyUp method to work the magic...
---We type javascript: to let the browser know we are sending some javascript.
---We say fo.se.value=fo.fi.value which simply means: make the value of our textarea the same as the textfield.

fo.se value
fo.fi.value
---the first section needs the form name which we named fo
---the second section needs the form element name which we named se (textarea) and fi (textfield)
---the third section is the word value which means we are about to say what we want fo.se equal to. In this instance, we want it to equal fo.fi

fo.se.value=fo.fi.value


We could have also made the same thing happen by calling a function of our own making:

function cHappy() {
fo.se.value=fo.fi.value;
}

<form name=fo>
<input type=text name=fi onKeyUp="javascript:cHappy()">
<textarea name=se></textarea>
</form>


-We just created and named a function cHappy.
-Put our mimicking code in that function - fo.se.value=fo.fi.value
-Then called our cHappy function from the onKeyUp tag.



Free Copy and Paste Javascript Code:

<script type="text/javascript">
<!--

function cHappy() {
fo2.se2.value=fo2.fi2.value;
}
-->
</script>

<form name=fo2>
<input type=text name=fi2 onKeyUp="javascript:cHappy()">
<textarea name=se2></textarea>
</form>

<br><br>

<form name=fo>
<input type=text name=fi onKeyUp="javascript:fo.se.value=fo.fi.value">
<textarea name=se></textarea>
</form>



Resources:
Change a Form Field with Javascript
Create a Function in Javascript
Call your Function in Javascript



Click HERE to comment or discuss at iLoveTheCode GOOGLE Group

Previous Article: Get String Length with Javascript

Next Article: Close Window with window.close in Javascript

CSS Mastery Andy Budd, Simon C... New $23.85	HTML Gary B. Shelly, Th... New $84.55	CSS David McFarland New $23.09
Learning Web Design Jennifer Niederst ... New $26.99	Head First HTML with CSS & XHTML Eric Freeman, Elis... New $23.99	CSS Eric Meyer New $29.69
Dreamweaver CS3 David McFarland New $29.69	HTML, XHTML, and CSS, Sixth Edition ... Elizabeth Castro New $23.09	Information Architecture for the Wor... Louis Rosenfeld, P... New $26.39

Privacy Information