Question

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

填写名字＆amp;姓氏和表格 - 飞行 - 结合＆＃34;全名字段＆＃34;中的名字和姓氏;

OR

提供了fullname字段，表单-on将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

您需要在这些字段之间创建数据绑定... 有一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: