自動填充或組合兩個輸入字段

Question

我有一個帶有3個輸入字段的表單。 1表示名字，1表示姓氏，1表示全名。如果用戶是什麼我想實現：

充盈姓名&姓氏和形式-on的飛越時，在「全名場」

OR

FullName域結合名字和姓氏被提供，並且形式 - 在firstname字段中輸入firstname，在lastname字段輸入lastname。

<label>Firstname<span class="small">Add the Artists firstname</span> 
</label> 
<input type="text" name="artistfield_fname" id="Artist_fname" /> 

<label>Lastname<span class="small">Add the Artists lastname</span> 
</label> 
<input type="text" name="artistfield_lname" id="Artist_lname" /> 

<label>Artist<span class="small">Add the Artists full name</span></label> 
<input type="text" name="artistfield_fullname" id="Artist_fullname" /> 

Answer 1

你需要創建一個數據綁定這些領域中... 有一個例子：

jQuery(document).ready(UserInfoCtrl); 
 
function UserInfoCtrl($) { 
 
    var self = this; 
 
    
 
    var form = $('#form'); 
 
    var fname = $('#fname'); 
 
    var lname = $('#lname'); 
 
    var fullname = $('#fullname'); 
 
    
 
    self.updateFirstName = function(firstName) { 
 
    var _lname = lname.val() || (fullname.val() || '').trim().split(' ').pop(); 
 
    fullname.val(firstName + ' ' + _lname); 
 
    }; 
 
    
 
    self.updateLastName = function(lastName) { 
 
    var _fname = fname.val() || (fullname.val() || '').trim().split(' ').shift(); 
 
    fullname.val(_fname + ' ' + lastName); 
 
    }; 
 
    
 
    self.updateFullName = function(fullName) { 
 
    var _fullname = (fullName || '').trim().split(' '); 
 
    
 
    fname.val((_fullname[0] || '')); 
 
    lname.val((_fullname[1] || '')); 
 
    }; 
 
    
 
    self.onFieldChange = function(e) { 
 
    switch(this.id) { 
 
     case 'fname': 
 
     self.updateFirstName(this.value); 
 
     break; 
 
     
 
     case 'lname': 
 
     self.updateLastName(this.value); 
 
     break; 
 
     
 
     case 'fullname': 
 
     self.updateFullName(this.value); 
 
     break; 
 
    } 
 
    }; 
 
    
 
    fname.add(lname).add(fullname).change(self.onFieldChange); 
 
    
 
    form.submit(function(e) { 
 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    
 
    <label for="fname">First Name</label> 
 
    <input type="text" id="fname" /> 
 
    <hr> 
 
    
 
    <label for="lname">Last Name</label> 
 
    <input type="text" id="lname" /> 
 
    <hr> 
 
    
 
    
 
    <label for="fullname">Full Name</label> 
 
    <input type="text" id="fullname" /> 
 
    
 
</form>

Answer 2

嘗試。 在的Html ..

<label>Firstname<span class="small">Add the Artists firstname</span> 
</label> 
<input type="text" name="artistfield_fname" id="Artist_fname" onkeyup="SetFullName()"/> 

<label>Lastname<span class="small">Add the Artists lastname</span> 
</label> 
<input type="text" name="artistfield_lname" id="Artist_lname" onkeyup="SetFullName()"/> 

<label>Artist<span class="small">Add the Artists full name</span></label> 
<input type="text" name="artistfield_fullname" id="Artist_fullname" onkeyup="NameSplitter()"/> 

在的Javascript

function SetFullName() 
    { 
     document.getElementById("Artist_fullname").value=""; 
     document.getElementById("Artist_fullname").value=document.getElementById("Artist_fname").value+" "+document.getElementById("Artist_lname").value; 
    } 
    function NameSplitter() 
    { 
     var namedata=document.getElementById("Artist_fullname").value.split(" "); 
     if(namedata.length==1) 
      document.getElementById("Artist_fname").value=namedata[0]; 
     if(namedata.length>1 && namedata.length<=2) 
     { 
      document.getElementById("Artist_fname").value=namedata[0]; 
      document.getElementById("Artist_lname").value=namedata[1]; 
     } 
     if(namedata.length>2) 
      { 
       for(var i=0;i<namedata.length-1;i++){ 
        if(i==0) 
         document.getElementById("Artist_fname").value=namedata[i]; 
        else 
         document.getElementById("Artist_fname").value=document.getElementById("Artist_fname").value+" "+namedata[i]; 
       } 
       document.getElementById("Artist_lname").value=namedata[namedata.length-1]; 
      } 
    }