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 に答える