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

时间:2014-04-14 15:08:34

标签: jquery html forms labels

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

这是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)总是随着所选择的任何内容消失,并且在没有选择任何内容时也消失。有人知道为什么吗?

4 个答案:

答案 0 :(得分:2)

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

FIDDLE

答案 1 :(得分:0)

您可以尝试以下代码:

<强> Working Deom

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

答案 2 :(得分:0)

试试这个:

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

<强> Working Demo

答案 3 :(得分:0)

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

这不依赖于您的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属性。