jQuery表單輸入字段甚至在document.ready函數被調用之前就存在

Question

我面臨一個奇怪的問題。 我對JavaScript jQuery比較陌生。

當我刷新頁面時，不會清除地址輸入字段，而會清除郵政編碼和電子郵件字段。

我嘗試了$('#input_address').get(0).value=''; 這清除了領域。 但是我不希望用戶從第2頁回到第1頁時發生這種情況。只有在刷新時才應清除字段。 電子郵件和郵政編碼在兩種情況下均能完美工作：將頁面和頁面2導航到頁面1導航。

 $(document).ready(function() { console.log("doc ready function"); // $('#input_address').get(0).value=''; // togglePlaceholder($('#input_email').get(0)); // togglePlaceholder($('#input_zip').get(0)); togglePlaceholder($('#input_address').get(0)); $('input, select, textarea').each( function() { var val = $(this).val().trim(); if (val.length) { $(this).addClass('sample'); } }); $('input, select, textarea').blur(function() { if ($(this).val()) $(this).addClass('sample'); else $(this).removeClass('sample'); }); $('input, select, textarea').focus(function() { console.log("focused"); if ($(this).val() == '') { $(this).removeClass('invalid'); $(this).addClass('sample'); } }); }) function togglePlaceholder(inputElement) { var inputAttr = inputElement.getAttribute("placeholder"); inputElement.placeholder = ""; inputElement.onblur = function() { this.placeholder = ""; } inputElement.onfocus = function() { this.placeholder = inputAttr; } } 

 .sample ~ label { font-size: 1em; top: -10px; left: 0; font-size: 1em; color: #F47B20; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-field col s6 col-xs-12"> <input type="text" onblur="togglePlaceholder(this);" onfocus="togglePlaceholder(this);" placeholder="123 Example Street" id="input_address" /> <label for="input_address">Street Address</label> </div> 

Answer 1

所以...您有兩個問題。

（1）自動完成是自動填充小部件的功能，

（2）您需要知道單擊了哪個按鈕才能做出相應的反應。

自動完成

關於自動完成，最肯定的情況是在第一組腳本在jQuery ready()函數中運行之后立即發生。

有兩種刪除自動完成的方法，但是實際上，我不建議使用其中任何一種，盡管我想如果您的要求是固定的，您將需要...

（a）要求輸入小部件甚至無法自動完成

<input ... autocomplete="off" .../>

（b）使用計時器運行腳本，以便腳本在自動完成后發生。 您無需在ready()函數中進行初始化，而可以在計時器超時后運行的子函數中進行初始化。

$(document).ready(function() {
    setTimeout(function(){
        // ...put your initialization here...
        // the autocompletion data should have been taken care of at this point
    }, 0);
});

請注意，您可以使用大於0的數字作為超時延遲，但是在大多數情況下，釋放當前線程一次后，0將可以很好地運行子功能，從而為系統提供了時間來完成自動完成和然后調用您的函數。 設置為0時，它應該是如此之快，以至於您甚至都不會看到<input .../>標簽閃爍。

注意：您可能還想將內部函數放置在實際函數中，如下所示：

function init_stuff()
{
    // ...your initialization code goes here...
}

$(document).ready(function() {
    setTimeout(init_stuff, 0);
});

如果您希望初始化繼續增長，那么長期來看這可能會更干凈。

單擊哪個按鈕

下一個問題是知道該代碼是否應該運行。 因此，為此您需要一個額外的if()語句。

在這方面， 此stackoverflow頁面上有一些技巧。 但是，我不確定在新加載的頁面中如何真正知道您是否單擊了“刷新”或“后退”按鈕。

從我在那里看到的代碼中，頁面內容的加載將100％在AJAX中進行，因此，您完全知道單擊了哪個按鈕，便重新實現了功能。 您將不得不搜索stackoverflow來找到更多方法。 我強烈建議您一次編寫具有一項功能的測試以確定正在發生的事情。

請注意，這將使初始化函數變得非常有用，因為在重新加載頁面之后，您將負責調用該函數（當您希望進行重置時）！ 換句話說，如果單擊了“后退”按鈕，請加載上一頁的HTML（即示例中的第1頁）並顯示它。 完成。 單擊“刷新”按鈕時，加載當前頁面的HTML並調用reset函數（也可能是“刷新”是默認按鈕，並且您不希望處理該按鈕，因為它還是會按預期清除。）

對於初學者來說，這將是一件有趣的工作！