如何onblur退出功能

我有以下代碼完美的作品，但我需要一個onblur語句，如果用戶點擊離開下拉，因此把它回到它的原始狀態 - 但試圖實現這一點和不知道從哪裏開始。如何onblur退出功能

下面的代碼：

<script> 
$(document).ready(function(){ 
    var choices = "<select class='choices'>" 
        +"<option value='Choice 1'>Choice 1</option>" 
        +"<option value='Choice 2'>Choice 2</option>" 
        +"<option value='Choice 3'>Choice 3</option>" 
        +"<option value='Choice 4'>Choice 4</option>" 
        +"</select>"; 

    $(".update").click(function() { 
    var $this = $(this), 
     currentChoice; 
    // don't continue if there's already a select in this cell 
    if ($this.find("select").length != 0) 
     return; 
    currentChoice = $this.html(); 
    var $choices = $(choices); 
    $this.empty().append($choices); 
    $choices.val(currentChoice); 
    }); 

    $(document).on("change", ".choices", function() { 
    var $this = $(this); 
    $this.parent().html($this.val()); 
    return false; 
    }); 
}); 
</script> 

<table id="list"> 
    <tr> 
     <td>Film Name 1</td> 
     <td class="update">Choice 1</td> 
    </tr> 
    <tr> 
     <td>File Name 2</td> 
     <td class="update">Choice 3</td> 
    </tr> 
    <!-- etc --> 
</table>

而且，我可以再使用onchange="this.form.submit();"提交變更到我的MySQL數據庫？

來源

2012-01-04 Darren Sweeney

你的情況是有點棘手，從我所看到的，你沒有選擇，只能處理全球click事件文檔，因爲blur在我的測試中不像預期的那樣對下拉元素有效。

因此，在全局點擊事件中啓動一個計時器，該計時器重置該值並在下拉本身的單擊事件中及其父級單元取消計時器，以便用戶仍可以選擇。

必須添加的代碼是：

var _timer = 0;  

$(document).on("click", ".choices, .update", function() { 
    window.clearTimeout(_timer); 
    return false; 
}); 

$(document).click(function() { 
    _timer = window.setTimeout(function() { 
     var oDDL = $(".choices"); 
     if (oDDL.length > 0) 
      oDDL.parent().html(oDDL.val()); 
    }, 50); 
});

Live test case。

編輯：爲了隱藏先前打開的下拉列表，你需要做的是，在單擊事件：

$(document).on("click", ".choices, .update", function() { 
    window.clearTimeout(_timer); 
    var curDDL = $(this); 
    $(".choices").each(function() { 
     if (this !== curDDL.get(0) && this !== curDDL.find("select").get(0)) 
      $(this).parent().html($(this).val()); 
    }); 
    return false; 
});

Updated jsFiddle。

來源

2012-01-04 10:03:26

非常感謝這一點，那麼最後一個難題是用戶點擊，這會關閉事件，這很好，如果用戶點擊選擇2，它會關閉事件選擇1？基本上這意味着每次只能打開一個選擇框 - 我想這會使其結束 – 2012-01-04 10:56:53

@Darren - 當然，請參閱我的編輯。 – 2012-01-04 12:03:27

是的，你可以在輸入標籤使用的onblur/onchange事件..表單元素中..

來源

2012-01-04 09:26:55 Vid

我知道我可以，但問題是怎麼樣的...我猜它會在選擇標籤像onblur = *****買什麼是*****謝謝 – 2012-01-04 09:57:28

如何onblur退出功能

回答

相關問題