如何使用 Jquery 更改表单文本但在用户填写时保留它？答案

【问题标题】：How to change form text with Jquery but keep it when filled by user?如何使用 Jquery 更改表单文本但在用户填写时保留它？
【发布时间】：2009-06-27 22:11:50
【问题描述】：

（我希望我的标题是可以理解的，很难总结。）

我有一些脚本可以根据所选单选按钮更改表单内的一些文本，如您在此处看到的： http://jsbin.com/onowu/

问题是，如果某些用户输入了一些文本，然后单击另一个单选按钮，它将删除他的文本。

我正在寻找一种仅在用户没有填写任何文本时才更改灰色文本的方法。如果用户删除他的文本，它将根据所选单选按钮填充空白。

您可以在此处查看我的代码： http://jsbin.com/onowu/edit

【问题讨论】：

标签： jquery text input if-statement

【解决方案1】：

检查输入是否具有“提示”类。只需更改文本即可。

完整示例：

$(document).ready(function() {
    function setText(){
        var kf = this.title.split('|');
        if (kf.length < 0) return;
        if($('#' + this.name + '_text').hasClass('hint')){
            $('#' + this.name + '_text').val(kf[0]).addClass('hint');
        }
        $('#' + this.name + '_text').attr('title', kf[0]);
    }

    $("input[type='text']").inputdynvalue();
    $("input[type='radio']").click(setText);
});

这是通过检查输入文本框的“提示”类并仅在找到时更改值来实现的。正如 Jonathan Sampson 在 cmets 中所提到的，“.focus() 事件会删除类“提示”，如果没有提供文本，.blur() 事件会再次添加它”。

我还将通过 W3C 提供的html validation service 运行您的代码。如果您没有有效的代码，JavaScript 可能会很有趣。（加上每个人都应该写有效的html）

A 还注意到您在代码中包含了两次 jQuery，我建议您删除其中一个。

更新（2009 年 7 月 10 日）：修复了以下 cmets 中提到的错误。

【讨论】：

++ |此外，.focus() 事件会删除类“提示”，如果没有提供文本，.blur() 事件会再次添加它。以防万一 MitMaro 的答案并不完全清楚。
lr_text 仅适用于第一个表单，但我的页面上有几个（给定示例中只有 2 个，但我有更多）所以我尝试了 $('#' + this.name + '_text') 但它没有用。
非常感谢您的回答。关于验证，我大部分时间都会验证我的代码，因为此代码仅适用于外部 JavaScript 文件。我不知道为什么它在 html 中时没有。我不明白你两次包含 jQuery 的意思。因为我需要在 body 中有一些 jQuery，在 head 中有另一个。如果我把两者放在一起，它就不起作用了。你能告诉我更多关于你的想法吗？
您在代码中的第 12 行直接在 head 标签下包含了一次 jQuery 库，并且在第 21 行的标题标签之后再次包含了它。对于验证，您遇到的唯一问题是您没有将 type="text/javascript" 包含到您的脚本标签中。
双jQuery来自jsbin.com。在我的本地服务器上，我没有两次，而且我也有“文本/JavaScript”，所以它已经过验证。但感谢您注意到它。我还注意到此代码上的一些小错误：jsbin.com/eqece 错误步骤：-单击“法语”-键入“blablabla”-单击“德语”-删除“blablabla”-单击空白区域（在表格之外和单选按钮）它在表单框中放回“法语”而不是“德语”（因为它被选中）。我尝试通过单击几个按钮，它只保留输入前的最后一个灰色文本。你知道如何解决这个错误吗？