Question

我实现了一个小jQuery来在input元素中显示默认消息。然后我将输入元素放在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>

Answer 1

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

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

Fiddle

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

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

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

Updated fiddle

Answer 2

您已经通过测试回答了问题，每次重播邮件时我都没有看到任何问题：

close : function() {
                        $('#myInput').val('New Default value');
                        },

带对话框的默认输入文本

2 个答案: