Question

当我点击textarea时，有没有办法删除标签？

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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可能希望在输入时将其删除，然后在未写入任何内容时将其添加回来。有两种方法可以实现这一目标：

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属性，那么查找要删除的相应标签应该相当简单：

＆＃13;

$('.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();
});

＆＃13;

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

＆＃13;

单击textarea会隐藏标签值

6 个答案: