Question

您好我使用-webkit-appearnce从div创建了一个textarea。现在我想在按键上向此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');
    }
});

由于

Answer 1

看看以下代码段。

$('#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>

Answer 2

您的代码运行正常。尝试按Enter键以使其发出警报。您正在检查是否按下了输入键if (e.which == 13)。您可以删除任何按键的条件语句。

参考：JsFiddle

Answer 3

当我在JSFiddle中尝试时，您的代码可以正常运行。当您按Enter时，您的代码将仅运行，并且会在现有文本下方创建一个新行，并显示alert()。但是，如果您打算不创建新行但仅在用户点击Enter时显示消息，请使用this。如果您打算只对用户问候一次，请使用this。最后，如果您想永远不允许用户写文本但只是向他显示提醒，请使用this。

如何使用'contenteditable'属性将keypress事件添加到div

3 个答案: