从多个文本输入框复制到文本区域：

I have 4 input text fields which I want to have them copy to a text area, I have tried to do the same as make each copy to a seperate text input field, but that did not work.

My code is as follows:

<fieldset>
        <legend>Page Message:</legend>
        <div class="textarey">
        <input type="text" class="lookalike" id="message_text1" name="message_text1" onkeyup="copy_data(this);  if(this.value.length>=24) document.editPage.message_text2.focus()" style="text-decoration:ltr;" value="<?php echo $page['message_text']; ?>" size="38" maxlength="24"><br>

        <input type="text" id="message_text2" name="message_text2" maxlength="24" size="38" class="lookalike"  style="text-decoration:ltr;"  value="<?php echo $page['message_text']; ?>" onkeyup="copy_data(this); if(this.value.length>=24) document.editPage.message_text3.focus()"><br>

        <input type="text" id="message_text3" name="message_text3" maxlength="24" size="38" class="lookalike"  style="text-decoration:ltr;"   value="<?php echo $page['message_text']; ?>" onkeyup="copy_data(this);  if(this.value.length>=24) document.editPage.message_text4.focus()"><br>

        <input type="text" id="message_text4" name="message_text4" size="42" class="lookalike"  style="text-decoration:ltr;"  value="<?php echo $page['message_text']; ?>" onkeyup="copy_data(this)">
 </div>


      <textarea id="message" /><?php echo $page['message']; ?></textarea>

And the Javascript that copies from the fields is here:

   function copy_data(val){ 
        var messageText = document.getElementById(val.id).value 
            document.getElementById('message').innerHTML = messageText;


} 

My issue is that every time a textfield gets to the end of it's maxchars it clears the text area. Anyone have any ideas here?

Thanks

<script type="text/javascript">
var text = "";
  for(var x=1;x<=4;x++) {
     text += document.getElementById("message_text"+x).value;
     text += "
";
  }
  document.getElementById("message").value = text;
</script>

• you might consider making a function for copying from whatever input you want into whatever element.

function copy_data(val){ 
    var messageText = document.getElementById(val.id).value 
        document.getElementById('message').innerHTML += messageText;
}

But I recommend against using inline js.

My issue is that every time a textfield gets to the end of it's maxchars it clears the text area. Anyone have any ideas here?

This is because even when you reach the end of maxchar you still keep typing. As per your javascript function, at a time, textarea will show data only from one of the 4 textfields. So, the movement field1 reaches max length, field2 gains focus as per your code.

onkeyup="copy_data(this);  if(this.value.length>=24) document.editPage.message_text2.focus()"

So, as field2 gains focus, and you keep typing, your textarea becomes blank and start showing field2 data.