自动填充或组合两个输入字段答案

【问题标题】：auto-fill or combine two input fields自动填充或组合两个输入字段
【发布时间】：2016-03-05 20:10:06
【问题描述】：

我有一个包含 3 个输入字段的表单。 1 代表名字，1 代表姓氏，1 代表全名。如果用户是我想要实现的目标：

填写名字和姓氏，表格-on the fly-在“全名字段”中结合名字和姓氏

或

提供了全名字段，并且表单-on the fly-将名字放在名字字段中，将姓氏放在姓氏字段中。

<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" />

【问题讨论】：

你有没有尝试过实现这个目标？

标签： jquery forms

【解决方案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>

【讨论】：

【解决方案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];
            }
     }

【讨论】：