Javascript 带有对话框的默认输入文本_Javascript_Jquery

Javascript 带有对话框的默认输入文本

javascript jquery

Javascript 带有对话框的默认输入文本,javascript,jquery,Javascript,Jquery,我实现了一个小jQuery来在输入元素中显示默认消息。然后，我将输入元素放入jQueryUI对话框中。它可以正常工作，除非在输入中输入一些文本，然后关闭对话框，然后打开对话框，这样会在输入元素中错误地显示最近输入的文本。如何修改它，以便每次打开对话框时都重新显示原始文本？请参阅以获取一个实时示例和下面的脚本。多谢各位 <!doctype html> <html lang="en"> <head> <meta charset="ut

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

<!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>


jQueryUI对话框
$（函数（）{
$（“#openDialog”）。单击（函数（）{$（“#myDialog”）。dialog（'open'）；返回false；}）；
$（“#myDialog”）.dialog({
莫代尔：是的，
自动打开：错误，
打开：函数（）{
$（“#myInput”）.blur（）；//如果此输入是对话框上的第一个输入，则为必填项，因为它将自动聚焦于
//$（'#myInput'）.val（'New Default value1'）.blur（）；
},
关闭：函数（）{
//$（'#myInput'）.val（'New Default value2'）；
},
按钮：{Ok:function（）{$（this）.dialog（“close”）；}
});
$（'.default value'）。每个（函数（）{
var$t=$（this），默认值=this.value；
$t.css（'color'，'#9292'）；
$t.focus（函数（）{
if（this.value==默认值）{
这个值=“”；
$t.css（‘颜色’、‘黑色’）；
}
});
$t.blur（函数（）{
如果（$.trim（此.value）=''）{
$t.css（'color'，'#9292'）；
this.value=默认值；
}
});
});
});
点击

您只需在触发输入的

模糊处理程序之前清空该值：
open: function () {
    $('#myInput').val('').blur();
}


否则，调用.blur（）
实际上没有帮助，因为$.trim（this.value）=''
将为false
为了使代码可用于具有多个输入的多个对话框，您可以使用class+上下文选择器而不是ID选择器：
$('.default-value', this).val('').blur();

您已经回答了问题a，并且每次重置消息时，我都没有看到任何问题：
close : function() {
                        $('#myInput').val('New Default value');
                        },

哈哈，这比我想象的要容易。非常感谢。我很接近，但没有设置为空，而是尝试设置为原始默认值。感谢againI，您也喜欢使用class+上下文选择器