如何使模態文本字段不被前面的條目填充

Question

要做到這一點有一個簡單的方法，但我嘗試了所有我能想到的（可能不多說）。在窗體的下拉列表中選擇「添加新」選項時，彈出一個模式。第一次彈出佔位符時出現，這是我想要的。但在此之後，最後輸入的值將顯示而不是佔位符。我怎樣才能讓佔位符每次出現？

這裏是jQuery的：

 <script type="text/javascript"> 

     var Classofentry = ''; 

     $('#add-new-text').val() === ''; // Set input text field to blank 
     console.log($('#add-new-text').val()); // <--------------- This is filled 

     $('#upload_form option[value="addnew"]').click(function(){ 

       // Show modal window 
       $('#add-new').modal('show'); 

       // Get the class 
       var Classofentry = $(this).attr("class"); 
       //console.log(Classofentry); 

       //$('#add-new-submit').val() == ''; // Set input text field to blank 
       //console.log($('#add-new-submit').val()); // <------------- Empty after first change 

       //$('#add-new-text').val() === ''; // Set input text field to blank 
       console.log($('#add-new-text').val()); // <--------------- This is filled 
       $('#add-new-submit').on('click', function(){     

        // Get new option from text field 
        var value = $('#add-new-text').val(); 
        //console.log(value); 

        $.ajax({ 
         type: "POST", 
         url: "<?php echo site_url(); ?>main/change_options", 
         data: {new_option: value, new_option_class: Classofentry}, 
         //dataType: "html", 
         dataType: "json", 
         error: errorHandler, 
         success: success 
         }); 

        function success(data) 
        { 

         if (data[1]) 
         { 
         // Add new entry 
         $('#'+Classofentry).append("<option value='" + data[0] + "'selected=\"selected\">" + data[0] + "</option>"); 
         //alert(data[1]); 
         } 
         else 
         { 

         // Select the nonunique value by emptying it and appending 
         $('#'+Classofentry).empty("<option value=''selected=\"selected\">" + data[0] + "</option>").append("<option value='" + data[0] + "'selected=\"selected\">" + data[0] + "</option>");               
         //alert(data[0]);        
         } 

        } 

        function errorHandler() 
        { 
         //alert('Error with AJAX!'); 
         alert(data[0]); 
        } 

        $('#add-new-submit').unbind('click'); // This fixes the problem for multiple entries 
        $('#add-new').modal('toggle');      

       }); 

       //$('#add-new-submit').unbind('click'); 

       //$('#upload_form option[value="addnew"]').unbind('click'); 
     }); 


    </script> 

和模態：

<!-- add-new field --> 
    <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">√ó</button> 
     <h3 id="add-new-fieldLabel">Add New Field</h3> 
     </div> 
     <div class="modal-body"> 

      <p>Would you like to add a new item?</p> 
      <input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option"> 

     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button> 
     </div> 
</div><!-- /add-new field --> 

，你可以看到我試着簡單的設置附加新的文本標籤的空白，這沒有按」工作。有什麼我可以做的HTML？

Answer 1

我認爲你應該做

$('input').val(''); 

清除值;）

Answer 2

另一種可能的解決辦法是從DOM中刪除的模式（我猜你已經看不到它的地方呢？ ），然後顯示一個深層複製的克隆。例如：

// Remove the modal element from the rendered DOM, this should be 
// done after you've attached any necessary event listeners 
var $modalSource = $('#add-new').remove(); 

// Later on, when you need to pull up the modal 
// Using clone(true) ensures that registered event listeners are also cloned 
$modalSource.clone(true).modal('show'); 

現在，每次打開模式時，它都會顯示一個新的克隆而不是原始的。這會將打開的模態返回到由HTML定義的狀態，所有字段都將處於原始狀態。從jQuery .clone() documentation：

的.clone（）方法執行匹配的元素的深層副本，這意味着它的副本匹配的元素，以及他們所有的後代元素和文本節點。出於性能原因，表單元素的動態狀態（例如，鍵入到輸入中的用戶數據，以及對選擇進行的文本區域或用戶選擇）不被複制到克隆的元素。 克隆操作將這些字段設置爲其在HTML中指定的默認值。

從DOM中刪除元素將確保使用任何ID的選擇器仍按預期方式工作。

這裏最好的事情是可以使用此方法，而不管模態中包含的元素。所以，即使你有輸入，textareas，選擇，甚至自定義元素，這仍然可以工作。

基於HTML & JS的其餘部分，但這個答案可能需要稍微調整一下。因此，如果您仍然遇到問題，請發佈更多詳細信息或提供一個正確說明您的問題的小提琴。