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

Question

(我希望我的头衔是可以理解的,很难总结.)

我有一些脚本可以根据所选的单选按钮更改表单中的某些文本,如下所示:http: //jsbin.com/onowu/

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

我正在寻找的是只有当用户没有填写任何文本时才更改灰色文本.如果用户删除了他的文本,它将根据所选的单选按钮填充文本.

你可以在这里看到我的代码:http: //jsbin.com/onowu/edit

Answer 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的评论中所提到的,".focus()事件删除了类"提示",如果没有提供任何文本,则.blur()事件会再次添加它".

我还将通过W3C提供的html验证服务运行您的代码.如果您没有有效的代码,JavaScript会很有趣.(加上每个人都应该写有效的HTML)

还注意到你在代码中包含了两次jQuery,我建议你删除其中一个.

更新(2009年7月10日):修复了以下评论中提到的错误.