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

Question

在创建表单中，用户键入他的姓名，然后输入他的姓氏，当他关注用户名文本字段时，必须自动附加surname.name字符串。 换句话说，使用javascript，一旦USERNAME输入文本字段获得焦点，NAME和SURNAME输入文本字段的值必须自动附加到它上并用点（。）= 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}"/>

有什么想法吗？

Answer 1

这是一个小型的演示，我希望这是你正在寻找的

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

这些是输入，这里是在用户名字段中调用onfocus的函数

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;
}
}