除了最后一个之外，不能让FOCUS函数工作

Can't get the FOCUS function to work except the last one

本文关键字：FOCUS 函数 工作 不能 最后一个      更新时间：2023-09-26
<script type="text/javascript">
jQuery(function() {
var default_val = "Name";
jQuery("input[name='first_name']").val(default_val)
.focus(function() {
if (jQuery(Name).val() == default_val) {
jQuery(this).val("")
}
});
var default_val = "Email Address";
jQuery("input[name='email']").val(default_val)
.focus(function() {
if (jQuery(this).val() == default_val) {
jQuery(this).val("")
}
});
var default_val = "Practice Name";
jQuery("input[name='practice_name']").val(default_val)
.focus(function() {
if (jQuery(this).val() == default_val) {
jQuery(this).val("")
}
});
var default_val = "Practice Website URL";
jQuery("input[name='practice_url']").val(default_val)
.focus(function() {
if (jQuery(this).val() == default_val) {
jQuery(this).val("")
}
});
var default_val = "Telephone";
jQuery("input[name='phone_number']").val(default_val)
.focus(function() {
if (jQuery(this).val() == default_val) {
jQuery(this).val("")
}
});
});
</script>

您可以使用不同的变量为每个输入设置默认值，以避免覆盖该值。例如:

HTML: 

<input name="practice_url" value="" />
<input name="phone_number" value="" />

JS: 

jQuery(function() { 
var default_val_practice_url = "Practice Website URL";
jQuery("input[name='practice_url']").val(default_val_practice_url)
.focus(function() {
if (jQuery(this).val() == default_val_practice_url) {
jQuery(this).val("")
}
});
var default_val = "Telephone";
jQuery("input[name='phone_number']").val(default_val)
.focus(function() {
if (jQuery(this).val() == default_val) {
jQuery(this).val("")
}
});
});

JS小提琴:http://jsfiddle.net/22mo0mL3/顺便说一句，您可以使用jquery占位符库。它也很酷!(https://github.com/mathiasbynens/jquery-placeholder)

您使用的是default_val。而不是使用它，使用有意义的变量名，如deafult_name, default_email, default_url等。另外，最好的做法是将这些静态变量放在代码的顶部

注意:您应该考虑使用placeholder属性。

你在回调函数中使用default_val变量，它被传递给.focus()方法。当调用回调函数时，该变量的值不是调用.focus()方法时的值。

您可以将重复的代码移动到函数中:

jQuery(function($) {
    function setDefaultValue($input, defaultValue) {
        $input.val(defaultValue).focus(function() {
            var $input = $(this);
            if ($input.val() == defaultValue) {
                $input.val("");
            }
        });  
    }
    setDefaultValue($("input[name='first_name']"), "Name");
    setDefaultValue($("input[name='email']"), "Email Address");
    setDefaultValue($("input[name='practice_name']"), "Practice Name");
    setDefaultValue($("input[name='practice_url']"), "Practice Website URL");
    setDefaultValue($("input[name='phone_number']"), "Telephone");
});

注意:

  1. jQuery对象作为参数传递给回调函数，该回调函数传递给jQuery()函数。上面的代码使用了这个事实，所以jQuery对象可以安全地使用$来引用。
  2. 在传递给focus方法的回调函数中，this指向.focus()被调用的元素。
相关文章：