2011-05-19 280 views
2

我有5個點擊的div標籤,div的顯示一個黃色的方框,方框內的數字。當用戶點擊一個廣場,廣場上的顏色變化來指示點擊廣場是'主動'廣場(這部分工作正常)。然後用戶應該能夠按下一個號碼。當按下數字時,div中顯示的數字應改變爲他們按下的數字!onKeyPress does not Work At Work!

但是...它不起作用!作爲div屬性,我有onkeypress =「(更改標記的innerHTML的函數)」。

出於測試目的,我寫onkeypress事件= 「警報( '鍵');」作爲div屬性來查看它是我的javascript函數還是onKeyPress本身!但警報不會顯示!

我試圖把onkeypress事件警報在身上的標籤,它工作得很好。它只是分區!我也嘗試按下一個鍵之前,我點擊的div和點擊後的div!

我也試過onkeydown和onkeyup!

我真的不能看到問題!代碼如下:

<html> 
<head> 
<style type="text/css"> 
#grid { 
    position:absolute; 
    padding: 0; 
    border:0; 
    width:370px; 
    height:370px; 
} 
.box 
{ 
    position:absolute; 
    border: 2px solid Black; 
    height: 50px; 
    width: 50px; 
    vertical-align: middle; 
    text-align: center; 
    background-color: yellow; 
    font-size: xx-large; 
    color:Navy; 
    font-family: Arial; 
    margin:10px; 
    line-height:1.6; 
} 
.boxActive 
{ 
    background-color:Aqua; 
} 
</style> 

<script type="text/javascript> 
function clicked(id) { 
    reset(); 
    $(id).addClass('boxActive'); 
} 
</script> 

<script type="text/javascript" src="JQuery.js"></script> 

</head> 
<body> 
    <div id="grid"> 
     <div id="cell_0_0" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:0%; ">0</div> 
     <div id="cell_0_1" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:20%; ">0</div> 
     <div id="cell_0_2" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:40%; ">0</div> 
     <div id="cell_0_3" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:60%; ">0</div> 
     <div id="cell_0_4" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%; left:80%; ">0</div>    
    </div> 
</body> 
</html> 

任何人都可以建議如何解決這個問題或更改div標籤的innerHTML,當用戶點擊div和按下一個鍵的方法!

謝謝!

Alex

回答

3

最近我遇到了類似的問題。我認爲你需要做的是讓你的DIV得到關注。 this question的答案應該有所幫助 - 實質上將一個tabindex屬性添加到DIV。

+0

你先生...是一個白德曼:) – 2011-05-19 14:54:13

0

我不認爲你可以,因爲它是一個容器元素,而不是輸入元素的div元素上使用onkeypress事件的事件。

如果你把對身體的onkeypress事件,你先前所描述,那麼你可以讀取按鍵值由ID來標識股利。一旦你有了div,你可以根據需要改變風格/類。

0

添加tabindex="0"到您的股利。這將使其「可以聚焦」。然後按鍵事件將起作用。重點和按鍵的

工作例如:http://jsfiddle.net/nYLqA/(點擊一個框,然後按一個鍵)(顏色的變化已被禁用)

如果使用tabindex="-1",那麼你必須點擊關注它。如果您使用的是tabindex="0",則通過點擊或選項卡鍵可讓您專注於此。

此外,如果你使用這條路線我建議

  • 測試它。確保它適用於你關心的瀏覽器(主要測試IE 7,與8/7兼容)
  • 使用onfocusonblur而不是onclick來改變你的顏色。如果你不關心IE 7,你可以使用CSS :focus來改變顏色。(就像CSS :hover
4

onkeypress時按下某個鍵時,纔會觸發爲「主動」領域。

線索有「字段」這個詞 - 默認情況下,<div>元素不能變爲「活動」;只有輸入字段。

您可能會喜歡tabindex="-1"作爲<div>中的某個屬性,但我無法保證它可以正常工作,但我還沒有嘗試過。即使那樣,您可能也必須在元素上手動輸入setFocus()

(此答案的最後一部分音符信貸來自其他地方SO:Is it possible to focus on a <div> using javascript focus() function?