如何使用'contenteditable'屬性將按鍵事件添加到div

您好我已經使用-webkit-appearnce從div創建了一個textarea。現在我想在按鍵上爲這個div添加一個事件。我盡我所能來做到這一點，但我不知道我錯在哪裏。如何使用'contenteditable'屬性將按鍵事件添加到div

請看看代碼，讓我知道錯在這個

CSS什麼：

#input { 
    -moz-appearance: textfield; 
    -webkit-appearance: textfield; 
    background-color: white; 
    background-color: -moz-field; 
    border: 1px solid darkgray; 
    box-shadow: 1px 1px 1px 0 lightgray inset; 
    font: -moz-field; 
    font: -webkit-small-control; 
    margin-top: 5px; 
    padding: 2px 3px; 
    width: 398px;  
}

HTML：

<div id="input" contenteditable>I look like an input</div>

的Jquery：

$('#input').unbind().on('keypress', function(e) { 
    if (e.which == 13) { 
     alert('hello'); 
    } 
});

感謝

來源

2016-06-15 Azad Chouhan

當用戶點擊「Enter」時，你的事件就會執行。您是否不希望顯示換行符以及顯示的提示？ –

看一看下面的代碼片段。

$('#input').on('keypress', function(e) { 
 
     alert('hello'); 
 
});

#input { 
 
    -moz-appearance: textfield; 
 
    -webkit-appearance: textfield; 
 
    background-color: white; 
 
    background-color: -moz-field; 
 
    border: 1px solid darkgray; 
 
    box-shadow: 1px 1px 1px 0 lightgray inset; 
 
    font: -moz-field; 
 
    font: -webkit-small-control; 
 
    margin-top: 5px; 
 
    padding: 2px 3px; 
 
    width: 398px;  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="input" contenteditable> 
 
    I look like an input 
 
</div>

來源

2016-06-15 10:09:21

你的代碼是工作的罰款。嘗試按回車，以便它會提醒。您正在檢查是否按下回車鍵if (e.which == 13)。您可以刪除任何按鍵的條件語句。

參見：JsFiddle

來源

2016-06-15 10:15:14 zakhefron

您的代碼按預期工作時，我嘗試在一個JSFiddle。您的代碼將只有當您按Enter時運行，它將在現有文本下面創建一個新行，並顯示alert()。但是，如果您的目的不是創建新行，而只是在用戶點擊Enter時顯示一條消息，請使用this。如果您的目的只是爲了迎接用戶一次，請使用this。最後，如果你想永遠不允許用戶寫文本，但只顯示他的警報，使用this。

來源

2016-06-15 10:19:20

好吧，我必須動態創建這個文本區域，並打入輸入事件？ –

@AzadChouhan假設你使用正確的ID創建這個文本區域，你可以使用$（'＃input'）。on（'keypress'，...）'使文本區域響應用戶輸入隨你怎麼便。您向我們提供的代碼示例要求用戶特別按區域內的「Enter」以顯示「alert（）」。你沒有具體說明你想要什麼，所以我繼續展示你的代碼做了什麼，它應該做什麼（不要創建一個換行符）以及你有什麼其他的選擇，你可能想要處理你的文本區域和該消息基於我對您代碼的理解。 –

如何使用'contenteditable'屬性將按鍵事件添加到div

回答

相關問題