Populate A Field in a Visualforce Page Using ActionRegion

Question

I have a VF page that contains 2 text fields. What I am trying to do is populate Field2 with the value from Field1 when Field1 is entered, but do so in real time (i.e., using actionRegion & actionSupport). I do have a custom controller on the page. Can anyone help with how to do this? Thanks.

VF Page Controller:

public with sharing class VF_Controller_CancelCreateCampaign{

    public string Budget_Name__c {get; set;}
    public string Use_Budget__c {get; set;}

public Campaign_Create_Request__c CCR;

    public VF_Controller_CancelCreateCampaign(ApexPages.StandardController myController){
        this.CCR = (Campaign_Create_Request__c)myController.getRecord();
    }

    public PageReference saveInit() {

        try{
            update CCR;
        }

        catch(DmlException ex){
            ApexPages.addMessages(ex);
        }

        PageReference tempPage = new PageReference('/apex/VF_CampaignCreate_View?id=' + CCR.Id);
        tempPage.setRedirect(true);
        return tempPage ;
    }

    public PageReference delInit() {
        delete CCR;

        PageReference tempPage = new PageReference('/' + CCR.Opportunity__r.Id);
        tempPage.setRedirect(true);
        return tempPage ;
    }

    public void BudgetName(){
        CCR.Use_Budget__c = CCR.Budget_Name__c;
    }
}

Answer 1

I have tried this logic and it is perfectly working.

Sample Page

<apex:page controller="sampleController" id="mypage">
<apex:form >            
    <apex:actionRegion>
    <apex:inputText value="{!temp}" id="field1">
        <apex:actionSupport event="onkeyup" reRender="Details" action="{!passValueToController}"/>
    </apex:inputText>
    </apex:actionRegion> 
    <br/>               
    <apex:outputPanel id="Details">            
        <apex:inputText value="{!temp1}" id="field2"/>
    </apex:outputPanel>
</apex:form>
</apex:page>

Controller

public class sampleController{
public String temp {get; set;}
public String temp1 {get; set;}

public sampleController(){
} 

public void passValueToController()
{
    temp1 = temp;
}            
}

Answer 2

You can simply set the value in client side using javascript, rather initiating a server side round-rip action to do the same job.

Page:

<apex:page controller="AccountController">

    <apex:form >
        <apex:inputText value="{!field1}" onkeyup="setField2(this)"/>
        <apex:inputText value="{!field2}" styleClass="field2Cls"/>
        <apex:commandButton value="Print" action="{!print}" reRender="none"/>

    </apex:form>

   <script type="text/javascript">
        function setField2(field1Ele){
           document.querySelector('.field2Cls').value = field1Ele.value;
        }
    </script>
</apex:page>

Controller:

public with sharing class AccountController {
    public String field1{get;set;}
    public String field2{get;set;}

    public void print(){
        System.debug(field1+'::'+field2);
    }

}