如何向带有“contenteditable”属性的div添加按键事件

Hi I have created a textarea from a div using -webkit-appearnce. Now I want to add an event to this div on key press. I try my best to do this but I am not sure where I am going wrong.

你好，我使用-webkit- appearance创建了一个div的文本区域。现在我想在按键上向这个div添加一个事件。我尽了最大的努力去做这件事，但我不知道我哪里做错了。

Please take a look at code and let me know what wrong in this

请看看代码，让我知道有什么问题

CSS:

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:

HTML:

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

Jquery:

Jquery:

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

Thanks

谢谢

3 个解决方案

#1

Have a look following snippet.

请看下面的代码片段。

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

#2

Your code is working fine. Try to press enter so that it will alert . You are checking whether enter key is pressed if (e.which == 13) . You can remove that conditional statement for any key press.

您的代码运行良好。试着按回车键，这样它就会报警。您正在检查输入键是否按下if (e)。= = 13)。您可以删除任何键按下的条件语句。

Refer : JsFiddle

参考:JsFiddle

#3

Your code works as intended when I try it in a JSFiddle. Your code will only run when you press Enter and it will create a new line below the existing text, as well as show the alert(). However, if what you intended was not to create a new line but only show a message when your user hits Enter, use this. If what you intended was to only greet the user once, use this. Finally if you wanted to never allow the user to write text but just show him the alert, use this.

当我在JSFiddle进行测试时，您的代码可以正常工作。您的代码将只在您按Enter时运行，它将在现有文本下面创建一条新行，并显示alert()。但是，如果您的目的不是创建新行，而是在用户点击Enter时显示消息，请使用这个。如果您的目的是只问候用户一次，请使用这个。最后，如果您不想让用户编写文本，而只是向他显示警告，请使用这个。

#1