jQuery 在输入表单上绑定焦点和模糊事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20017300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery bind focus and blur events on input form
提问by 001221
Hi I have an input form and I also have some labels which will help a user to fill out the form. My css is set to hide these by default but when the user clicks on focus's on the input field then the next label will show and on blur it will be hidden.
嗨，我有一个输入表单，我还有一些标签可以帮助用户填写表单。默认情况下，我的 css 设置为隐藏这些，但是当用户单击输入字段上的焦点时，将显示下一个标签，并在模糊时将其隐藏。
With the current script I have written for some reason it keeps showing all the labels and it doesn't seem to hide it on blur.
使用我出于某种原因编写的当前脚本，它会不断显示所有标签，并且似乎没有将其隐藏起来。
Not an expert on jQuery so if any could help me fix this problem that would great.
不是 jQuery 方面的专家，所以如果有人可以帮助我解决这个问题，那就太好了。
My code is below or view a jsFiddle:
我的代码在下面或查看jsFiddle：
js/js.js
js/js.js
$(document).ready(function(){
$('.form-control').bind('blur', function(){
$('.form_helper').removeClass("form_helper_show").addClass('.form_helper'); });
$('.form-control').bind('focus', function(){
$('.form_helper').removeClass("form_helper").addClass('form_helper_show'); });
});
css/style.css
css/style.css
ul {
list-style:none;
}
li:nth-child(2), li:nth-child(3) {
display:inline;
}
.form_helper {
display:none;
}
.form_helper_show {
display:inline-block;
}
index.html
索引.html
<div class="form-group">
<ul class="form_group">
<li><label for="client_name">Company Name</label></li>
<li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
<li><label for="client_name_helper" class="form_helper">Input your clients name</label></li>
</ul>
</div>
<div class="form-group">
<ul class="form_group">
<li><label for="client_name">Company Code</label></li>
<li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
<li><label for="client_name_helper" class="form_helper">Input your clients code</label></li>
</ul>
</div>
回答by Tushar Gupta - curioustushar
Try
尝试
$(document).ready(function () {
$('.form-control').bind('blur', function () {
$(this).parent().next('li').find('.form_helper_show').removeClass("form_helper_show").addClass('form_helper');
});
$('.form-control').bind('focus', function () {
$(this).parent().next('li').find('.form_helper').removeClass("form_helper").addClass('form_helper_show');
});
});
更好的方法
$(document).ready(function () {
$('.form-control').bind('blur', function () {
$(this).parent().next('li').find('.form_helper').hide();
}).bind('focus', function () {
$(this).parent().next('li').find('.form_helper').show();
});
});
更好的使用 .on().on()而不是.bind().bind()
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本， .bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用 .bind() 时存在。要获得更灵活的事件绑定，请参阅 .on() 或 .delegate() 中事件委托的讨论。
参考
回答by waldek_h
$(document).ready(function(){
$('.form-control').on('blur', function(e){
$(this).parent('li').next().find('label').removeClass("form_helper_show").addClass('form_helper');
});
$('.form-control').on('focus', function(e){
$(this).parent('li').next().find('label').removeClass("form_helper").addClass('form_helper_show');
});
});
This should work
这应该工作
回答by Katherine Dragieva
I've searched the whole internet and finally I found the thing that I needed.
我搜索了整个互联网，终于找到了我需要的东西。
When something is on focus (in my case - the "More options" button), I wanted everything in the background to be blurred like in the image uploaded.
当某些内容成为焦点时（在我的情况下 - “更多选项”按钮），我希望背景中的所有内容都像上传的图像一样模糊。
I've used jQuery simply by adding a class in css:
我只是通过在 css 中添加一个类来使用 jQuery：
filter: blur(8px);
-webkit-filter: blur(8px);
I added this class to my articles and header (because I wanted only them to be blurred):
我将这个类添加到我的文章和标题中（因为我只希望它们变得模糊）：
$('article, header').addClass('blurItems');
$('文章，标题').addClass('blurItems');
Looks so cute now.
现在看起来好可爱。
