我的问题正如标题所见,点击一次无效,再点一次就好了。
这是我原来的代码:
<div class="login-form">
<p>New user?<a href="register.html">Register here!</a></p>
<form>
<div class="form-text">
<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
</div>
<input type="submit" id="submit" value="登录" >
</form>
</div>
这是我修改后的代码:
<div class="login-form">
<p>New user?<a href="register.html">Register here!</a></p>
<div class="form-text">
<input type="text" id="username" class="text" value="USERNAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'USERNAME';}" >
<input type="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
</div>
<input type="submit" id="submit" value="登录" >
</div>
可以看到,我把form标签删了。
产生这个问题的原因是:我们点击登录后,form会默认提交表单,服务器响应后会刷新页面,根本就没有执行我们写的 JavaScript 代码。
如果页面中有一些初始化的 JavaScript 代码或者事件绑定逻辑依赖于页面加载完成后执行,而第一次点击提交时,这些逻辑还未完全准备好,就可能导致第一次点击无效。第二次点击时,页面已经完成了初始化,所以点击有效。
这个结论从下面的例子也能证明:
就是我先故意没写用户名和密码提交一次,提交这一次后,下一次再提交就是有效的。原因其实就是我们故意提交的那次错误,页面完成了初始化。
还有,如果我们提交了一次,以后无论提交多少次都行,这也能证明了是因为没有初始化而导致我们第一次提交没有效果。
结论:form标签的锅,以后使用的时候要多加小心。