JS/jQuery的移动标签为默认值

Question

我想使用jQuery/JS做到以下几点：

1. 获取的表单输入标签的值
2. 将这些标签作为值输入自己
3. 隐藏标签

非常简单。因为我不希望有打出来

$('firstname input').val('First Name'); 
$('lastname input').val('Last Name'); 
$('street input').val('Street'); 
$('city input').val('City'); 

等等，我怎么能去从每一个元素拉动标签，并将其粘贴到该元素的输入框？

这里是HTML的一个略微简化版本：

<form action="/" method="post" id="user-register-form" accept-charset="UTF-8"> 
<div> 
    <div id="customreg"> 
     <div class="firstname"> 
      <div class="form-item form-type-textfield form-item-first-name"> 
       <label for="edit-first-name"> 
        First Name 
        <span class="form-required" title="This field is required.">*</span>    </label> 
       <input type="text" id="edit-first-name" name="first_name" value="" size="24" maxlength="128" class="form-text required" /> 
      </div> 
     </div> 
     <div class="lastname"> 
      <div class="form-item form-type-textfield form-item-last-name"> 
       <label for="edit-last-name"> 
        Last Name 
        <span class="form-required" title="This field is required.">*</span> 
       </label> 
       <input type="text" id="edit-last-name" name="last_name" value="" size="24" maxlength="128" class="form-text required" /> 
      </div> 
     </div> 
    </div> 
    <input type="submit" id="edit-submit--3" name="op" value="Join!" class="form-submit" /> 
     <input type="hidden" name="form_build_id" value="form-5DDdSC4UFk_YPJIfuJgMhC4215CYJneg9PBDdetJtDQ" /> 
     <input type="hidden" name="form_id" value="custreg_user_register_form" /> 
    </div> 
</form> 

Answer 1

这将是最短的解决方案：

$('input').siblings('label').each(function(index){ 
    var $this = $(this); 
    $this.hide(); 
    $this.siblings('input').each(function(index){ 
     $(this).val($($this[index]).text()); 
    }); 
}); 

Answer 2

这将有助于查看HTML，但如果我们假设标签来直接输入之前，你可以做到这一点。

$('#myForm label + input').val(function() { 
    return $(this).prev().text(); 
}).prev().hide(); 

适用于HTML，看起来像这样。

<form id="myForm"> 
    <label>first</label><input><br> 
    <label>last</label><input><br> 
    <label>phone</label><input> 
</form> 

如果输入被封装，您可以这样做。

$('#myForm label > input').val(function() { 
    var txt = $(this.parentNode).text(); 
    this.previousSibling.data = ""; 
    return txt; 
}).unwrap(); 

适用于这种HTML。如果你绕到您的标签http://jsfiddle.net/LBEWK/

---

：

<form id="myForm"> 
    <label>first<input></label><br> 
    <label>last<input></label><br> 
    <label>phone<input></label> 
</form> 

Answer 3

如果您label■找合适for属性相匹配的input的ID，用这个：

$('input').val(function(){ 
    return $('label[for=' + this.id + ']').hide().text(); 
}); 

这里的小提琴您的input s，使用这个：

$('input').each(function() { 
    var $this = $(this), 
     $label = $this.parent(); 

    $this.val($label.text()); 
    $label.replaceWith($this); 
}); 

这里的小提琴：http://jsfiddle.net/tswkV/

Answer 4

$.each($('label'), function() { 
    $('#' + $(this).attr('for')).val($(this).text()); 
});