Question

我的联系表格需要一些帮助。我试图在用户点击框中时自动删除标签，但我似乎无法弄清楚如何。

这是HTML

<div class="six columns">
    <form>
        <div class="row">
            <div class="six columns">
                <label class="gfield_label" for="Name" style="display: block;">Name<span class="gfield_required">*</span>
                </label>
                <input type="text" id="Name" required class="mobile-four" />
            </div>
            <div class="six columns">
                <label class="gfield_label" for="Name" style="display: block;">Company</label>
                <input type="text" id="Name" required class="mobile-four" />
            </div>
        </div>
        <div class="row">
            <div class="six columns mobile-four">
                <label class="gfield_label" for="email" style="display: block;">Email<span class="gfield_required">*</span>
                </label>
                <input type="email" class="mobile-four" id="email" required />
            </div>
            <div class="six columns mobile-four">
                <label class="gfield_label" for="phone" style="display: block;">Phone<span class="gfield_required">*</span>
                </label>
                <input type="phone" class="mobile-four" id="phone" required />
            </div>
        </div>
        <div class="row">
            <div class="twelve columns mobile-four">
                <label class="gfield_label" for="message" style="display: block;">Message<span class="gfield_required">*</span>
                </label>
                <textarea id="message" cols="30" rows="3"></textarea>
            </div>
            <div class="three columns centered">
                <button id="contact-submit-btn" class="btn btn-block btn-danger">Contact us Now!</button>
            </div>
        </div>
    </form>

</div>

这是我迄今为止尝试过的JS。但似乎没有任何效果。

$('input, textarea').focus();
    $(this).prev('label').hide();
});


$('.gfield_label').focus(function () {
    $('label.mobile-four[for="' + $(this)[0].id + '"]').hide();
});

$('.gfield_label').each(function () {
    2
    var elem = $(this);
    3
    $('label[for="' + $(this).attr('id') + '"]').click(function () {
        4
        elem.focus();
        5
    });
    6
    if ($(this).val() != '') {
        7
        $('label[for="' + $(this).attr('id') + '"]').hide();
        8
    }
    9
}).focus(function () {
    10
    $('label[for="' + $(this)[0].id + '"]').hide();
    11
}).blur(function () {
    12
    if ($(this).val() == '') {
        13
        $('label[for="' + $(this)[0].id + '"]').show();
        14
    }
    15
}).change(function () {
    16
    if ($(this).val() != '') {
        17
        $('label[for="' + $(this)[0].id + '"]').hide();
        18
    }
    19
})

如果有人可以提供帮助，那将会很棒。该页面位于beta.harbordev.com/contact.html

非常感谢

UPDATE !!!!!

$(function() {
    $('input, textarea').on('focus blur', function () {
        $(this).prev().toggle();
    });
});

这个建议很有效。它现在在网站上存在，但不知何故，消息字段（textarea）总是随着所选择的任何内容消失，并且在没有选择任何内容时也消失。有人知道为什么吗？

Answer 1

$(function() {
    $('input, textarea').on('focus blur', function () {
        $(this).prev().toggle();
    });
});

FIDDLE

Answer 2

您可以尝试以下代码：

<强> Working Deom

$('input, textarea').focus(function(){
      $(this).prev('label').hide();
});

Answer 3

试试这个：

$('input, textarea').keyup(function(){ 
 if($(this).val()=="")
      $(this).prev('label').show();
 else
      $(this).prev('label').hide();
});

<强> Working Demo

Answer 4

这就是我想出的。我假设您在值存在时尝试隐藏标签，如果它不存在则会再次显示。

这不依赖于您的HTML结构，如果您不处理一致的标记，这是很好的。

var $inputs = $(':input'), 
    $labels = $('label');

$inputs.on('input blur focus', function () {

  var $input = $(this),
      value = $input.val(),
      id = $input.attr('id'),
      $label; 

  $label = $labels.filter(function(){
    return $(this).attr('for') === id; 
  });

  $label.toggle(value.length === 0);

}).trigger('input');

这是一个小小的演示：http://jsbin.com/jigucuna/4/edit?html,js,output

PS：您可能也想查看placeholder属性。

Jquery从焦点上的联系表单中删除标签

4 个答案: