1

我实现了一个小 jQuery 来在输入元素中显示默认消息。然后我将输入元素放在一个 jQueryUI 对话框中。它工作正常，除非您在输入中输入一些文本，然后关闭对话框，然后打开对话框，这会错误地在输入元素中显示最近输入的文本。如何修改它以便每次打开对话框时都会重新出现原始文本？请参阅http://jsfiddle.net/Mxf7s/以获取实时示例和以下脚本。谢谢

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

        <script>
            $(function() {
                $("#openDialog").click(function(){$("#myDialog").dialog('open');return false;});
                $( "#myDialog" ).dialog({
                    modal: true,
                    autoOpen    : false,
                    open        : function() {
                        $('#myInput').blur(); //Required if this input is the first one on the dialog since it will automatically be focused on
                        //$('#myInput').val('New Default value1').blur();
                    },
                    close        : function() {
                        //$('#myInput').val('New Default value2');
                    },
                    buttons: {Ok: function() {$( this ).dialog( "close" );}}
                });
                $('.default-value').each(function() {
                    var $t=$(this), default_value = this.value;
                    $t.css('color', '#929292');
                    $t.focus(function() {
                        if(this.value == default_value) {
                            this.value = '';
                            $t.css('color', 'black');
                        }
                    });
                    $t.blur(function() {
                        if($.trim(this.value) == '') {
                            $t.css('color', '#929292');
                            this.value = default_value;
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <button id="openDialog">Click</button>
        <div id="myDialog" title="My Dialog">
            <input type="text" value="Original Default value" class="default-value" name="myInput" id="myInput" />
        </div>
    </body>
</html>
4

2 回答 2

2

您只需在触发输入的处理程序之前清空该值blur：

open: function () {
    $('#myInput').val('').blur();
}

小提琴

否则，呼叫.blur()并没有真正的帮助，因为$.trim(this.value) == ''这将是错误的。

为了使您的代码可重用于具有多个输入的多个对话框，您可以使用类+上下文选择器而不是 ID 选择器：

$('.default-value', this).val('').blur();

更新的小提琴

于 2013-03-03T18:08:32.753 回答
0

您已经通过测试回答了您的问题，并且每次重置消息时我都没有看到任何问题：

close : function() {
                        $('#myInput').val('New Default value');
                        },
于 2013-03-03T18:23:40.370 回答