jQuery preventDefault - 无法正常工作答案

【问题标题】：jQuery preventDefault - cannot get this workingjQuery preventDefault - 无法正常工作
【发布时间】：2012-09-12 22:06:53
【问题描述】：

我正在尝试使用 preventDefault 以便在以“帐号”作为输入值的表单提交时不会发生任何事情。

对于我所做的所有阅读，我看不到问题所在。我怀疑我只是盯着它太久了，错过了一些非常明显的东西。今天帮我准时下班！

此处的非工作代码示例：http://jsfiddle.net/sX52r/

HTML

<form action="/" id="AccSearch" method="post">                            

<input type="text" name="AccountNumber" ID="AccountNumber" class="lookup_field" value="Account number" onfocus="if(this.value=='Account number'){this.value=''}" 
onblur="if(this.value==''){this.value='Account number'}">

<input type="image" id="AccSearchSubmit" src="/Images/search.png" onmousedown="this.src='/Images/search_down.png'" onmouseup="this.src='/Images/search.png'" onmouseout="this.src='/Images/search.png'" alt="Submit" />

</form>

js

$('#AccSearchSubmit').click(function (e) {
    if ($('#AccountNumber').val == 'Account number') {
        e.preventDefault();
        alert("BOING!");
    }
});

【问题讨论】：

不会解决您的问题，但您可能对jQuery Watermark plugin 感兴趣。

标签： javascript forms jquery placeholder

【解决方案1】：

我只是想跟进这件事，因为我今天有一点空闲时间并设法改进了我的原始代码。

我发现在这种情况下使用 return false 实际上比 preventDefault 更合适。通过按 Enter 提交表单也存在问题，这取决于我正在使用的文本框的值。

不管怎样，这是我的解决方案 - 结果也变得更轻了。

http://jsfiddle.net/sX52r/22/

$('#AccSearch').submit(function () {
if ($('#AccountNumber').val() == 'Account number' || $('#AccountNumber').val() == '') {
alert("BOING!");            
return false;
}});

【讨论】：

【解决方案2】：

val 是一个函数，你应该调用它。

if ($('#AccountNumber').val() == 'Account number') {

还有working jsFiddle。

建议：

捕获表单的submit 事件可能是一个更好的主意，因为在文本输入中按 Enter 也会提交表单。
您应该使用placeholder HTML5 属性（所有现代浏览器都支持），而不是这种“脆弱”的解决方案（带有所有丑陋、突兀的内联事件处理程序），对于旧浏览器，请使用类似的插件Mathias Bynens's jquery-placeholder.

【讨论】：

在提交而不是点击时这样做很好 - 毫无疑问，这会让我感到困惑。
@AlanShortis 如果您满意，请在左侧打勾接受我的回答（或任何其他回答，如果您更喜欢这些回答）。

【解决方案3】：

val 是 jQuery 对象的方法，而不是属性。改变这个：

if ($('#AccountNumber').val == 'Account number') {

到这里：

if ($('#AccountNumber').val() == 'Account number') {
//                         ^^ invoke the method

【讨论】：

【解决方案4】：

$('#AccountNumber').val 是函数指针。要使用该值，请像这样调用函数：

$('#AccountNumber').val();

【讨论】：

【解决方案5】：

使用表单的提交事件。使用 click() - 您必须手动处理 enter 按键。

$('#AccSearch').submit(function (e) {
    if ($('#AccountNumber').val() == 'Account number') {
        e.preventDefault();
        alert("BOING!");
    }
});

你也错过了 .val() 之后的括号

http://jsfiddle.net/sX52r/8/

【讨论】：