輸入字段清除按鈕導致模糊事件 - 如何避免

我正在建立一個帶有「清除值」按鈕的表單字段 - 就像在iOS上有一個小小的「X」圖標，您可以點擊清除搜索字符串。輸入字段清除按鈕導致模糊事件 - 如何避免

我的問題是：我使用該字段的模糊事件來對輸入格式進行錯誤檢查，並且我的「X」圖標實現總是觸發模糊事件。我很難過：如果我把圖標作爲背景圖像放在輸入字段中，我不再有點擊目標，並且如果我在字段頂部使用標準div或img，當然，模糊觸發器。

我使用jQuery，但這可能是一個通用的CSS/JavaScript問題。

例如這裏接受的解決方案：Clear icon inside input text 這是原始意圖的一個很好的例子，但這也會在您附加模糊事件後立即觸發模糊事件。

UPDATE： 這似乎是最好的辦法是使用錯誤檢查功能 - 但我不喜歡它，所以我一直在尋找......原來我不知道在HTML5的contenteditable屬性。

除了不使用表單數據的表單字段以及忘記不能使用HTML5的舊式瀏覽器的顯而易見的可訪問性問題之外，爲什麼不重新創建帶有contenteditable div標籤的輸入字段呢？這裏

來源

2013-03-25 tim

模糊火災，因爲你刪除焦點，當你點擊按鈕，你能指望什麼？ – epascarello 2013-03-25 17:55:46

如果你使用背景圖片，你仍然有一個點擊目標...這只是不理想的使用。您必須找出輸入點擊的位置，如果它位於特定邊界內（「清除」按鈕所在的位置），請清除文本。否則，這是一個正常的點擊 – Ian 2013-03-25 17:58:29

而不是試圖避免模糊事件，爲什麼你不從你的輸入驗證功能排除這種情況（X點擊）？有幾種方法可以做到這一點，例如，懸停時，您可以將var doExclude設置爲true。在你驗證功能，當模糊事件觸發時，可先在函數的其餘部分之前檢查這樣的：X是做

if (exclude) return;

後，您可以將焦點返回到你的輸入，如果你想$('input').focus();

來源

2013-03-25 18:07:20 Vexter

許多選項

您可以更改觸發驗證的「KEYUP」或檢查錯誤上的$('#X-icon').click(fn)可以清除/隱藏錯誤信息「提交」
使用jquery validate plugins
以及。所以用戶不會看到錯誤信息。

來源

2013-03-25 18:06:01 aifarfa

一些黑客可能不喜歡的事情是，您在模糊事件中使用setTimeout，以便延遲代碼運行100毫秒（或無論多長時間）。在100ms內，應該點擊「清除」按鈕。如果不是，那麼運行正常的錯誤檢查/格式化。如果已被點擊，請清除輸入的文本，不要執行正常的blur事件。

下面是一個例子，使用造型從您發佈的鏈接（Clear icon inside input text）：

$(document).ready(function() { 
    var clearTextTimeout; 

    $("#data_field").on("blur", function() { 
     var $that = $(this); 
     clearTextTimeout = setTimeout(function() { 
      console.log("would be error checking and formatting text");    
     }, 100); 
    }); 

    $("#data_field_clear").on("click", function() { 
     clearTimeout(clearTextTimeout); 
     console.log("clearing text"); 
     $("#data_field").val(""); 
    }); 
});

http://jsfiddle.net/37Pxw/

關注瀏覽器的控制檯，你會看到，錯誤檢查/格式化僅運行時你不要點擊「清除」按鈕「。將數量減少到50而不是100可能是安全的。

這工作，因爲「清除」按鈕的click事件將輸入的blur事件之後立即運行，所以如果click事件沒有在100ms內（50）輸入的blur事件的運行它足夠安全的假設，它不是，沒有點擊。

來源

2013-03-25 18:09:09 Ian

+1對於一個相當的嘗試解決問題。 – tim 2013-03-25 19:14:14

我解決我的問題是這樣的（我不喜歡輸入標籤很多）：

<!DOCTYPE html> 
<html> 
<script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
<script> 
$(function(){ 

$('div[contenteditable]').on('blur', function(){ 
alert('d'); 
}); 
$('div[contenteditable] > img').on('click', function(){ 
$(this).parent().text(''); 
}); 

}); 
</script> 
<style> 
div[contenteditable] { border:1px solid #009; position:relative;} 
img {position:absolute; top:2px; right:2px; cursor: pointer;} 
</style> 
<body> 

<div contenteditable="true">default value<img src="/" width="10" height="10" /></div> 

</body> 
</html>

來源

2013-03-25 19:33:37 tim

輸入字段清除按鈕導致模糊事件 - 如何避免

回答

相關問題