CONTENTEDITABLE DIV裏面跨度標籤需要按鍵事件

我在我的HTML代碼以下DIV：CONTENTEDITABLE DIV裏面跨度標籤需要按鍵事件

<div id="expanderInput" tabIndex="1" contentEditable></div>

我使用的是CONTENTEDITABLE DIV爲使可自動展開的文本框的簡單，跨瀏覽器的方法。我也在做什麼用戶進入這個div輸入驗證。它應該是由逗號分隔的電子郵件地址列表。當用戶嘗試提交不正確的信息時，我的javascript會將輸入分塊，並以紅色突出顯示所有不正確的分塊。

//split the address into the comma-separated chunks 
var chunks = splitForward(forwardsTo); 

//Grab each bad chunk one at a time and stick it in a span with a red-colored text 
for(var i = 0; i < invalids.length; i++) 
{ 
    var current = chunks[invalids[i]]; 
    current = '<span class="highlighted">' + current + '</span>'; 
    chunks[invalids[i]] = current; 
} 
$("#expanderInput").html(chunks.join()); 
initHighlighted();

數組'invalids'包含所有壞塊的索引。到目前爲止，一切正常。但是一旦用戶開始在紅色文本中輸入內容，我需要紅色消失，但只是在該範圍內。例如，如果有兩個不正確的塊，每個都以紅色突出顯示，並且用戶開始修復一個，另一個需要保持紅色。

我已經試過事件偵聽器連接到跨度：

initHighlighted = function() 
{ 
    $(".highlighted").keypress(function() 
    { 
     alert("It works!"); 
    }); 
};

但事件不會發生，甚至當用戶編輯紅色的文字。使用瀏覽器的開發者工具，我可以看到事件處理程序在那裏，它從未出現過。它是div上的contentEditable屬性導致跨度接收事件嗎？我也嘗試將這些跨度本身設爲contentEditable，但行爲仍然相同。

來源

2010-08-25 JDC

除非我記錯了，這應該解決您的問題：

initHighlighted = function() 
{ 
    $(".highlighted").live("keypress",function() 
    { 
     alert("It works!"); 
    }); 
};

因爲你的跨距DOM中的按鍵事件偵聽器沒有連接的初始加載後添加有無所依附他們去。 jquery的live通過將這些監聽器附加到這個例子中來爲你排序，無論這些監聽器是否被添加到DOM中，都會被「高亮顯示」。

閱讀了jQuery的網站上的文檔，以獲得更好的解釋比我可以給你：http://api.jquery.com/live/

編輯：我的不正確讀取你的問題，並意識到你是後後安裝的按鍵聽衆道歉'突出顯示'跨度被添加。

你讀過這雖然：

Keyboard events for child elements in a contenteditable div?

來源

2010-08-25 07:05:06

是啊，我在想了一會兒，如果聽衆甚至被附着，但最絕的是。我發現如果用戶總是立即開始輸入並且只有一個紅色字段，那麼使用.focus（）將會起作用。換句話說，它不是真正的解決方案。我跟着你的鏈接，它給了我最終使用的解決方案 - 只使用選擇API來獲得我想要的節點。不是我想要的，但最終完成了工作。我不知道我在搜索時沒有找到那個。雖然謝謝！ – JDC 2010-08-25 08:42:35

CONTENTEDITABLE DIV裏面跨度標籤需要按鍵事件

回答

相關問題