jQuery 如果输入值是默认值，则在提交时防止默认值

Posted 2023-03-15

【中文标题】jQuery 如果输入值是默认值，则在提交时防止默认值

【英文标题】：jQuery if input value is default, prevent default on submit

【发布时间】：2011-07-06 10:57:08

【问题描述】：

我有一个表单，如果输入的值为默认值，我想禁用提交功能。

<input id="company" name="companyname" value="company">
<input type="submit" class="button">

我试过这个jquery：

$(".button").click(function(e)
    if($("#company").attr('value', 'defaultValue'))
       
           alert("Please fill out the contact form."); 
           e.preventDefault();
       
   );

但它没有按预期工作，它会触发并按预期显示警报，但也会将输入的值更改为“defaultValue”。

我很难过 :) 我做错了什么？

You can see it in action here.

【问题讨论】：

对不起，你想在这里实现什么？如果文本框中的值没有改变，你想阻止发布吗？

【参考方案1】：

是的，我知道这已经得到解答，但我有一些时间，所以我编写了一个快速框架，可以让您轻松跟踪更改。基本上，这将监视表单上的所有输入元素，并通过在值更改时为它们提供一个特殊的类来直观地跟踪它们的更改。因此，用户一眼就可以看到他们所做的更改。此外，如果没有任何输入元素发生更改，这个小框架还会阻止您发回表单。您可以通过更改选择器来扩展此框架以包含更多元素！

.changedValue

    border-bottom: 1px solid #0c5403 !important;
    background: #e1fedd !important;


<input id="company" name="companyname" value="company"/>
<input type="submit" class="button"/>

$('input').live('focusin', function() 
    var tx = this,
        jqt = $(tx);

    //store the original value if we don't already have it
    if (typeof(tx.defaultValue) == 'undefined') 
        tx.defaultValue = tx.value;
    

)
//control change
.live('focusout', function() 
    var t = this,
        jqThis = $(t);
    jqThis[t.defaultValue != t.value ? 'addClass' : 'removeClass']('changedValue');


);


$(".button").click(function(e) 
    if ($("input.changedValue").length == 0) 
        alert("Please fill out the contact form.");
        e.stopPropagation();
        e.preventDefault();
        return false;
    
);

【参考方案2】：

有

if ($("#company").attr('value', 'defaultValue'))

您将value 设置为defaultValue。改为这样做：

if ($("#company").attr('value') == 'defaultValue'))

感谢 Ryan：最好使用 .val() 而不是 .attr('value')，以防当前值与 html 属性中指定的值相比发生了变化，而 jQuery 并没有专门处理这个问题.

这样做：

if ($("#company").val() == 'defaultValue'))

【讨论】：

@Delan; jsfiddle.net/Kyle_Sevenoaks/69HjD/1 我插入了您建议的代码，现在它不显示警报。 @Ryan：我也这样做了，它只是像以前一样改变了值。

对不起，我的回答中有一个小的语法错误。现在再试一次。

您在复制我的答案时出错。你写了if ($("#company").val('defaultValue')，但我的答案是if ($("#company").val() == 'defaultValue'))。

已更正，但仍然没有骰子。 :/ jsLint 返回：Problem at line 2 character 47: Expected '' and instead saw ')'. if ($("#company").val() == 'defaultValue'))

你又把我的答案抄错了。删除最后的右括号。

【参考方案3】：

用 .val() 试试这个：

http://jsfiddle.net/69HjD/2/

您可能想要进一步扩展它，所以也许看看 jQuery 的验证插件？

【参考方案4】：

如果默认值只是作为提示更改值，如果可能考虑使用新的 HTML5 placeholder 属性。你甚至可以use jQuery to help browsers that don't support it yet。这样您就不必费心检查它是否是默认值。

演示：http://jsfiddle.net/Marcel/pKBMu/

【讨论】：

很遗憾，我现在不能使用它。老板之类的。但是感谢您的提示:)

太可惜了，这是一件相当美好的事情。