我的联系表格需要一些帮助。我试图在用户点击框中时自动删除标签,但我似乎无法弄清楚如何。
这是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)总是随着所选择的任何内容消失,并且在没有选择任何内容时也消失。有人知道为什么吗?
答案 0 :(得分:2)
$(function() {
$('input, textarea').on('focus blur', function () {
$(this).prev().toggle();
});
});
答案 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
属性。