Question

我有一个输入表单

<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
        }

    }

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

Answer 1

我尝试将您的代码放在jsFiddle here中，并在Developer Tools控制台中收到以下错误：

未捕获的ReferenceError：未定义handleSearchFocus

未捕获的ReferenceError：未定义handleSearchBlur

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

通常，您将运行代码onLoad，因为您需要完成加载所有元素才能操作和抓取页面上的元素。在你的情况下，你需要发生相反的事情。您的元素是使用与您的函数相关联的onfocus和onblur事件创建的。但是，这些功能尚不存在，因此无法触发。请注意，如果您将jsFiddle onLoad更改为no wrap (body)，则您的功能可以正常工作。

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

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

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

Answer 2

MrOBrian在问题评论中发现了造成这种错误的错误。

javascript问题后onblur和onfocus

2 个答案: