Javascript - 找不到函数?！从onClick调用，函数在同一页面中

Javascript - Function not found?! called from onClick, and function is in same page

本文关键字：函数 一页 调用 onClick 找不到 Javascript      更新时间：2023-09-26

我有一个非常奇怪和令人困惑的错误。

这是我的代码：

{if="$pjax === false"}{include="header"}{/if}
<script type="text/javascript">
    $(document).ready(function() {
        function clickclear(thisfield, defaulttext) {
            if (thisfield.value == defaulttext) {
                thisfield.value = "";
            }
        }
        function clickrecall(thisfield, defaulttext) {
            if (thisfield.value == "") {
                thisfield.value = defaulttext;
            }
        }
    });
</script>
<form action='./login' method='post' name='form'>
<ul class="form">
    <li><input type="text" name="username" value="Username" id="username" onclick="clickclear(this, 'Username')" onblur="clickrecall(this,'Username')"  /></li>
    <li><input type="password" name="password" value="Password" id="password" onclick="clickclear(this, 'Password')" onblur="clickrecall(this,'Password')" /></li>
    <li><span style='display:block;height:27px;float:left;line-height:27px;'>Remember Me</span> <div id='itoggle' style='float:right;'><input type="checkbox" id="remember" class='itoggle' /></div><div class='clearfix'></div></li>
</ul>
</form>
<a href="javascript: form.submit()" class="button white">Login</a>
{if="$pjax === false"}{include="footer"}{/if}

您可以看到有两个功能，clickclear和clickrecall。这些是从 onClick 和 onBlur 上的表单输入调用的。但是，当我运行它们时，我收到以下JavaScript错误：

未

捕获的引用错误：未定义单击清除

未

捕获的引用错误：未定义单击召回

有什么想法吗？我知道这可能是一件非常简单的事情，但我看不到它。

这是因为您的函数在.ready()回调中。这些在全局范围内是不可见的（这很好）。

最好使用 jQuery 的事件附件方法，如 .on() ：

$(document).ready(function(){
    //your code
    function clickclear(){...}
    function clickrecall(){...}
    //the handlers
    $('#username').on('click',function(){ //bind click handler
        clickclear(this,'Username');      //things to do on click
    }).on('blur',function(){              //chain blur handler
        clickrecall(this,'Username');     //things to do on blur
    });
    $('#password').on('click',function(){ //bind click handler
        clickclear(this,'Password');      //things to do on click
    }).on('blur',function(){              //chain blur handler
        clickrecall(this,'Password');     //things to do on blur
    });
    ...other handlers...
});

附带说明一下，Chrome 有一个placeholder属性，它的作用类似于占位符文本：

<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
相关文章：