帶對話框的默認輸入文本

我實現了一個小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>

來源

2013-03-03 user1032531

你只需觸發輸入的blur處理程序之前清空值：

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

Fiddle

否則，調用.blur()並不能真正幫助爲$.trim(this.value) == ''會是假的。

，使您的代碼可重用的多輸入多對話，你可以使用一個類+上下文選擇，而不是ID選擇：

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

Updated fiddle

來源

2013-03-03 18:08:32

哈哈，那是比我想象得容易。謝謝！我很接近，但不是設置爲空，而是嘗試將其設置爲原始默認值。再次感謝 – user1032531 2013-03-03 18:12:05

我也喜歡你使用class +上下文選擇器 – user1032531 2013-03-03 18:23:10

不客氣。 '=]' – 2013-03-03 18:29:26

你已經回答您的問題測試，我沒有看到任何問題，每一次的消息正在重置：

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

來源

2013-03-03 18:23:40

帶對話框的默認輸入文本

回答

相關問題