javascript问题后的onblur和onfocus

onblur and onfocus after javascript issue

本文关键字：onfocus onblur 问题 javascript      更新时间：2024-03-23

我有一个输入表单

<input id="txtSearch" class="txtSearch" name="SearchPhraseText" type="text"http value="<%= ServiceSite.Resources.Resources.SITEMATER_ENTER_SEARCH_TERM %>" onfocus="handleSearchFocus(this)" onblur="handleSearchBlur(this)" onkeypress="if (event.keyCode == 13 ) {search();}"/>

当我在javascript中向$（document）.ready添加以下内容时。。

if ( window.location.search.indexOf( "search" ) != -1){
    $('#txtSearch').val( "<%= Session["SearchPhrase"] %>"v);
}

考虑到我在javascript 的其他地方有这个

     function handleSearchFocus(searchBox) {
        if ($(searchBox).val() == "<%= ServiceSite.Resources.Resources.SITEMATER_ENTER_SEARCH_TERM%>") {
           $(searchBox).val("");
           $(searchBox).css("color", "black");
        }
    }
    function handleSearchBlur(searchBox) {
        if ($(searchBox).val() == "" ) {
           $(searchBox).css("color", "gray");
           $(searchBox).val("<%= ServiceSite.Resources.Resources.SITEMATER_ENTER_SEARCH_TERM%>"); //should reference config file
        }
    }

这两个处理聚焦和模糊的功能不再起作用。当我点击输入框或点击离开时，不会运行。我想做的是，如果有一个搜索值应该显示，就显示它。如果没有，它遵循上面模糊/聚焦函数中的逻辑。

我试着把你的代码放在jsFiddle中，在开发者工具控制台中得到了以下错误：

未捕获引用错误：未定义handleSearchFocus

未捕获引用错误：未定义handleSearchBlur

请注意，我将jsFiddle设置为运行脚本onLoad，这就是我假设您使用代码所做的。

通常，您会运行代码onLoad，因为您需要所有元素来完成加载，以便操作和获取页面上的元素。在你的情况下，你需要相反的结果。您的元素是通过与您的函数绑定的onfocus和onblur事件创建的。然而，这些功能还不存在，因此无法启动。请注意，如果将jsFiddle onLoad更改为no wrap (body)，则函数可以工作。

换句话说，元素试图在函数可用之前找到它们。

您需要将函数放在主体中的<script>标记中（在元素之后），或者将其附加到$(document).ready代码中的事件中，如下所示：

$('#txtSearch').focus(function () {
    // code here
});
$('#txtSearch').blur(handleSearchBlur);

MrOBrian在问题注释中发现了导致此问题的错误。

相关文章：