使用javascript自动在onfocus的输入文本字段中附加值

Question

In a create form, the user types his name, then his surname, and when he focuses on the username text field, the surname.name String must be appended automatically. In other words, Using javascript, once the USERNAME input text field receives focus, the values of NAME & SURNAME input text fields must be appended to it automatically and separated by a dot (.) = surname.name

     <h:outputLabel value="#{bundle.CreateUsersLabel_name}" for="name" />
                    <h:inputText id="name" value="#{usersController.selected.name}" title="#{bundle.CreateUsersTitle_name}" />
                    <h:outputLabel value="#{bundle.CreateUsersLabel_surname}" for="surname" />
                    <h:inputText id="surname" value="#{usersController.selected.surname}" title="#{bundle.CreateUsersTitle_surname}" />
 <h:outputLabel value="#{bundle.CreateUsersLabel_username}" for="username" />
                    <h:inputText id="username" value="#{usersController.selected.username}" title="#{bundle.CreateUsersTitle_username}" required="true" requiredMessage="#{bundle.CreateUsersRequiredMessage_username}"/>

Any ideas please?

Answer 1

Here is a small demo that I made hopefully this is what you are looking for

name:    <input id="name" /> <br>
surname: <input id="surname" /><br>
username: <input onfocus="input()" id="username" />

those are the inputs and here is the function that gets called onfocus in the username field

function input(){
var name = document.getElementById('name').value;
var surname = document.getElementById('surname').value;
var username = '';

//only fill in the field if name and surname are entered 
if(name != '' && surname != ''){
    username = name+'.'+surname;
    document.getElementById('username').value = username;
}
}