點擊textarea隱藏標籤值

Question

當我點擊進入textarea時，有沒有辦法刪除標籤？

http://jsfiddle.net/1smvym84/4/

HTML：

<li id='field_1_9' class='gfield' > 
    <label class='gfield_label' for='input_1_9'>Place this inside the textarea</label> 
    <div class='ginput_container'> 
     <textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea> 
    </div> 
</li> 

JQUERY：

$(document).ready(function(){ 
    $('.textarea').text($('.gfield_label').text()); 
    $('.gfield_label').remove(); 
}); 

非常感謝:-)

Answer 1

任何幫助，如果你想刪除它重點：

$("#input_1_9").focus(function() { 
    $(this).parent("div").prev("label").remove(); 
}); 

Answer 2

我想你在找什麼是HTML的佔位符屬性：

<textarea name="input_9" id="input_1_9" class="textarea medium" tabindex="8" rows="10" cols="50" placeholder="Your text goes here"></textarea> 

Answer 3

我認爲這將是更好，如果你會使用佔位符。就像這樣：

<textarea placeholder="Place this inside the textarea"></textarea> 

但是，如果你想要做它在JS這將是這樣的：

$('.textarea').on('click', function() { 
$('.gfield_label').remove(); 
}); 

Answer 4

試試這個：

$(document).ready(function(){ 
 
    //work for all elements which have the css class textarea 
 
    $('.textarea').click(function(){ 
 
     $('.textarea').val($('.gfield_label').html()); 
 
     //if you want to remove all elements having gfield_label css class 
 
     $('.gfield_label').remove(); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <label class="gfield_label">this is label</label> 
 
<textarea class="textarea"></textarea> 
 
</form>

Answer 5

你可能想要在輸入時刪除它，如果沒有寫入，請將其添加回去。有2種方式來實現：

HTML5的方式：http://jsfiddle.net/1smvym84/8/

$(document).ready(function(){ 
    var placeholderText = $('.gfield_label').text(); 
    $('.textarea').attr("placeholder",placeholderText); 
    $('.gfield_label').remove(); 
}); 

jQuery的方式：http://jsfiddle.net/1smvym84/7/

$(document).ready(function(){ 
    var placeholderText = $('.gfield_label').text(); 
    $('.textarea').text(placeholderText); 
    $('.gfield_label').remove(); 

    $('.textarea').focus(function(){ 
     var $this = $(this); 
     if ($this.text() === placeholderText){ 
      $(this).text(""); 
     } 
    }).blur(function(){ 
     var $this = $(this); 
     if ($this.text() === ""){ 
      $(this).text(placeholderText); 
     } 
    }) 
}); 

Answer 6

如果使用標籤上的for屬性一致，仰視要刪除的相應標籤應該相當容易：

$('.textarea').on("focus", function() { 
 
    var areaId = $(this).attr("id"); 
 
    var areaLabel = $("label[for='" + areaId + "']"); 
 
    
 
    // Get the content from the label 
 
    $(this).text(areaLabel.text()); 
 
    
 
    // Remove the label 
 
    areaLabel.remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class='gfield_label' for='input_1_9'>Place this inside the textarea</label> 
 
<div class='ginput_container'> 
 
    <textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8' rows='10' cols='50'></textarea> 
 
</div>