我有一个表单,一旦用户向该字段添加值,就会在每个字段上方显示小标签。
这个for有时会加载一些预填充的字段。
我该如何检查页面加载,如果任何表单字段有一个值,如果是这样,有标签可见?
下面是我当前用于在字段有值时显示标签的代码:
$('.form-control').blur(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
在页面加载时试试这个:
$('.form-control').each(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
$(document).ready(function(){
$('.form-control').each(function(){
if($(this).val() != ''){
$(this).prev().show();
}
});
});
在文档就绪的情况下,对于每个.form-control,如果输入的值不是空的,执行任何代码来显示标签
使用focusout
Event不会太过分,不是吗?
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
// ALTHOUGH BLUR IS OK, ONE COULD SIMPLY BIND THE .form-control CLASSES TO THE focusout EVENT
// THIS ENSURES THAT THERE IS A HIGHER LIKELIHOOD THAT THE FIELD IN QUESTION ONCE HAD FOCUS
// WHICH MAY IMPLY THAT THE USER ALSO INTERACTED WITH THE FIELD IN SOME WAY...
$('.form-control').each(function(elem){
var objElem = $(this);
objElem.focusout(function(evt) {
if ($(this).val()) {
// NOW, YOU SHOULD KNOW WHICH METHOD TO USE TO TRAVERSE THE DOM
// AND GET AT THE LABEL....
// IN YOUR CASE IT SEEMS TO BE THE PREVIOUS ELEMENT BEFORE THE FORM-FIELD.
$(this).prev().show();
}
});
});
});
})(jQuery);
</script>